Website ziet er anders uit in https

[miicker]

Mijn vraag
Ik heb een website gemaakt, alles ziet er gewoon prima uit, totdat ik overga op https.
Als ik dus ga naar:
http://mijnwebsite.nl

dan ziet het er veel beter uit dan wanneer ik ga naar:
https://miinwebsite.nl

Ik heb wel gewoon een geldig certificaat. De website draait overigens op mijn Synology NAS (DS261Play)

Op internet kan ik hierover echt niets vinden..

Iemand enig idee waar dit mee te maken kan hebben?

[Megamind]

Beide websites werken niet.

[BCC]

Waarschijnlijk link je nog naar een stylsheet of asset via http:// ? Verander dat eens naar ://

[BugBoy]

Even in Chrome de developer tools openen en kijken wat er niet geladen wordt. Het kan ook zijn dat er nog wat oude stylesheets in cache zijn blijven hangen. Ook dat kun je prima in je developer tools controleren.

[base_]

Ik vermoed dat er niet-https content niet meegeladen wordt (css/plaatjes b.v.). Dit kan door blokkeren van browser van niet https op htpps site of doordat content simpelweg niet op https beschikbaar is (404).

[Kecin]

Gebruik in je code geen harde URL's. Dus bijvoorbeeld een CSS bestand anders inladen:

code:

<style type="text/css" media="all">
@import url("/style.css");
</style>

of

code:

<style type="text/css" media="all">
@import url("://mijndomein.nl/style.css");
</style>

i.p.v.

code:

<style type="text/css" media="all">
@import url("http://mijndomein.nl/style.css");
</style>

[ Voor 23% gewijzigd door Kecin op 26-05-2016 22:24 ]

[Bee.nl]

base_ schreef op donderdag 26 mei 2016 @ 22:21:
Ik vermoed dat er niet-https content niet meegeladen wordt (css/plaatjes b.v.). Dit kan door blokkeren van browser van niet https op htpps site of doordat content simpelweg niet op https beschikbaar is (404).

Dat is ook het eerste wat bij me opkwam: http-verkeer binnen een https-omgeving. De term die je zoekt is (het blokkeren van) 'mixed content'.

[miicker]

Kecin schreef op donderdag 26 mei 2016 @ 22:22:
Gebruik in je code geen harde URL's. Dus bijvoorbeeld een CSS bestand anders inladen:

code:

<style type="text/css" media="all">
@import url("/style.css");
</style>

of

code:

<style type="text/css" media="all">
@import url("://mijndomein.nl/style.css");
</style>

i.p.v.

code:

<style type="text/css" media="all">
@import url("http://mijndomein.nl/style.css");
</style>

Hmm, ik heb het thema van een website gedownload, maar er staat bijvoorbeeld de volgende code:

code:

<link id="wsite-base-style" rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/sites.css?buildTime=1234" />
<link rel="stylesheet" type="text/css" href="http://cdn1.editmysite.com/editor/libraries/fancybox/fancybox.css?1234" />
<link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/social-icons.css?buildtime=1234" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="files/main_style.css?1463952984" title="wsite-theme-css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,200,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />

<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />

Hou zou ik dit dan moeten doen?
En ik vraag me sowieso af of het niet beter is die css sheets te downloaden of zo en dan op mijn eigen server te zetten, om zo minder afhankelijk te zijn van derde partijen (als dat zo is, is er dan een makkelijke manier om de bestanden waarnaar gelinkt wordt te downloaden?)

[Compizfox]

Maak er // van, zoals Kecin ook al liet zien in een voorbeeld.

[RobIII]

Compizfox schreef op donderdag 26 mei 2016 @ 22:55:
Maak er ::// van, zoals Kecin ook al liet zien in een voorbeeld.

Het is toch // en niet :// Of heb ik iets gemist?
http://paulirish.com/2010/the-protocol-relative-url/

Maar inderdaad overal gewoon http: van af slopen.

[ Voor 36% gewijzigd door RobIII op 26-05-2016 23:04 ]

[miicker]

RobIII schreef op donderdag 26 mei 2016 @ 23:00:
[...]

Het is toch // en niet :// Of heb ik iets gemist?
http://paulirish.com/2010/the-protocol-relative-url/

Maar inderdaad overal gewoon http: van af slopen.

Top! Notepad++ CTRL+H (zoeken & vervangen)
http:// vervangen door // en het was opgelost!
Had http:// al geprobeerd te vervangen door :// en dat werkte dus niet.
Bedankt, ziet er nu weer prima uit!

[RobIII]

Doe ik nog even een schopje naar Webdesign, Markup & Clientside Scripting
Waar hoort mijn topic?

[miicker]

Sorry

Ik loop nu tegen het volgende kleine probleem aan, gebruikers kunnen de website benaderen door gebruik te maken van http.

Ik heb de volgenden .htaccess file aangemaakt:

code:

# Redirect HTTP to HTTPS
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Dit zou toch moeten werken als ik dit in de root van het domein zet?

Ik heb een random .htaccess bestand gedwonload en daar die code in gezet.

[Compizfox]

RobIII schreef op donderdag 26 mei 2016 @ 23:00:
[...]

Het is toch // en niet :// Of heb ik iets gemist?
http://paulirish.com/2010/the-protocol-relative-url/

Maar inderdaad overal gewoon http: van af slopen.

Oh, je hebt gelijk ja.

---

miicker schreef op donderdag 26 mei 2016 @ 23:33:
Sorry

Ik loop nu tegen het volgende kleine probleem aan, gebruikers kunnen de website benaderen door gebruik te maken van http.

Ik heb de volgenden .htaccess file aangemaakt:

code:

# Redirect HTTP to HTTPS
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Dit zou toch moeten werken als ik dit in de root van het domein zet?

Ik heb een random .htaccess bestand gedwonload en daar die code in gezet.

Je hebt een random .htaccess gedownload? En wat staat daar nog meer in dan? Je moet het gewoon in een lege zetten.

[ Voor 53% gewijzigd door Compizfox op 26-05-2016 23:56 ]

[CH4OS]

code:

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^/(.*) https://hostname/$1
</IfModule>

Is wat ik gebruik om te redirecten naar HTTPS pagina's. Wel even mod_rewrite activeren. Meestal kan dat met a2enmod rewrite. Daarna even Apache herstarten.

[miicker]

Compizfox schreef op donderdag 26 mei 2016 @ 23:54:
[...]

Oh, je hebt gelijk ja.

---

[...]

Je hebt een random .htaccess gedownload? En wat staat daar nog meer in dan? Je moet het gewoon in een lege zetten.

Heb die htaccess file natuurlijk wel leeg gemaakt

maar het werkt helaas nog niet..

[Kecin]

RobIII schreef op donderdag 26 mei 2016 @ 23:00:
[...]

Het is toch // en niet :// Of heb ik iets gemist?
http://paulirish.com/2010/the-protocol-relative-url/

Maar inderdaad overal gewoon http: van af slopen.

Goed gezien. Had de reactie op mijn mobiel getypt. In eerste instantie stonden ze er niet en na een edit toegevoegd. Op mijn telefoon zag het er ineens uit alsof het niet klopte ofzo haha.

@TS;
Het lijkt me sowieso verstandiger om al je bestanden lokaal te serveren (dus downloaden van de bron en plaatsen op je eigen server). Ook moet je even checken of je Apache gebruikt wanneer je een htaccess bestand gaat toevoegen (mod_rewrite moet dan ook aanstaan).
Het is ook mogelijk dat je hoster htaccess blockt (niet aannemelijk, dan zou je php kunnen gebruiken:

code:

<?php
if (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] !== 'on') {
    if(!headers_sent()) {
        header("Status: 301 Moved Permanently");
        header(sprintf(
            'Location: https://%s%s',
            $_SERVER['HTTP_HOST'],
            $_SERVER['REQUEST_URI']
        ));
        exit();
    }
}
?>

[miicker]

Kecin schreef op vrijdag 27 mei 2016 @ 00:39:
[...]

Goed gezien. Had de reactie op mijn mobiel getypt. In eerste instantie stonden ze er niet en na een edit toegevoegd. Op mijn telefoon zag het er ineens uit alsof het niet klopte ofzo haha.

@TS;
Het lijkt me sowieso verstandiger om al je bestanden lokaal te serveren (dus downloaden van de bron en plaatsen op je eigen server). Ook moet je even checken of je Apache gebruikt wanneer je een htaccess bestand gaat toevoegen (mod_rewrite moet dan ook aanstaan).
Het is ook mogelijk dat je hoster htaccess blockt (niet aannemelijk, dan zou je php kunnen gebruiken:

code:

<?php
if (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] !== 'on') {
    if(!headers_sent()) {
        header("Status: 301 Moved Permanently");
        header(sprintf(
            'Location: https://%s%s',
            $_SERVER['HTTP_HOST'],
            $_SERVER['REQUEST_URI']
        ));
        exit();
    }
}
?>

Lijkt er inderdaad op dat die geblokt wordt doo Synology o.i.d. heb in ieder geval geen zin om het ssh m'n NAS in te gaan en dan het php.ini bestand aan te gaan passen of zo en de door jou gegeven oplossing werkt! Heb het gewoon in de header.php opgenomen die geinclude is in alle pagina's

[Kecin]

miicker schreef op vrijdag 27 mei 2016 @ 00:44:
[...]


Lijkt er inderdaad op dat die geblokt wordt doo Synology o.i.d. heb in ieder geval geen zin om het ssh m'n NAS in te gaan en dan het php.ini bestand aan te gaan passen of zo en de door jou gegeven oplossing werkt! Heb het gewoon in de header.php opgenomen die geinclude is in alle pagina's

Top! Via SSH kan je trouwens bijv. vi gebruiken om je php.ini aan te passen en mod_rewrite in te schakelen. Je breekt daarmee niet je Nas af o.i.d.
De functie zelf kan ook niet echt kwaad. Succes met je site!

[Verwijderd]

Heb je trouwens al gechecked of al je website items veilig zijn en linken naar https? Met dit tooltje kun je dat trouwens checken: https://www.whynopadlock.com

[RGAT]

Megamind schreef op donderdag 26 mei 2016 @ 22:18:
Beide websites werken niet.

Ik vermoed dat 'mijnwebsite.nl' een fictieve voorbeeldnaam is
Gewoon een vaag vermoeden...

[Verwijderd]

RGAT schreef op vrijdag 27 mei 2016 @ 01:24:
[...]


Ik vermoed dat 'mijnwebsite.nl' een fictieve voorbeeldnaam is
Gewoon een vaag vermoeden...

dat zou best wel eens kunnen kloppen

[q-enf0rcer.1]

Je kunt niet met één druk op de knop verwachten dat de site in zowel https als http werkt. Dit vereist voor bestaande websites vaak best veel werk. Alle inkomende en uitgaande requests moeten tenslotte ook worden aangepast. Afbeeldingen, scripts, html bestanden etc die beginnen met http:// zullen moeten worden omgezet. Je kunt hiervoor // gebruiken. Dit zorgt ervoor dat automatisch het passende protocol wordt gebruikt.

[Compizfox]

q-enf0rcer.1 schreef op vrijdag 27 mei 2016 @ 12:05:
Je kunt niet met één druk op de knop verwachten dat de site in zowel https als http werkt. Dit vereist voor bestaande websites vaak best veel werk. Alle inkomende en uitgaande requests moeten tenslotte ook worden aangepast. Afbeeldingen, scripts, html bestanden etc die beginnen met http:// zullen moeten worden omgezet. Je kunt hiervoor // gebruiken. Dit zorgt ervoor dat automatisch het passende protocol wordt gebruikt.

Als de website netjes is geschreven zou dat moeten kunnen hoor.

Dat houd dus o.a. in dat je niet onnodig absolute URLs gebruikt en dat je // ipv http:// gebruikt voor externe resources.