Foutmelding - Content Security Policy melding

In geval de website weigert een script te laden kun je in Chrome zien wat de oorzaak is. 

Start Chrome, roep de pagina op en klik op de drie verticale punten rechts in adresbalk > More Tools > Developer Tools > Tabblad Console. Daar zie je in zo'n geval bijvoorbeeld:

Het is een beveiligingsrichtlijn in alle browsers die bronnen die niet voldoen aan de policy blokkeert. De policy kan ofwel door een HTTP header of als een HTML meta tag. Het ziet eruit als

Wat wordt geblokkeerd

Hier drie voorbeelden van wat geblokkeerd wordt:

• Refused to load the script 'https://cdn.domain.com/scripts.js' because it violates ...

  betekent dat het script https://cdn.domain.com/scripts.js geblokkeerd wordt en dus niet gedownload en uitgevoerd kan worden.

• Refused to execute inline script because it violates ...betekent dat inline Java script geblokkeerd wordt. Inline Javascript bevat <script> tags en onevent handlers <button onclick=""doeIets()">

• Refused to apply inline style because it violates ...

  Een inline CSS werd geblokkeerd. Dat kan ofwel <style> tags betreffen of een inline style attribute <div style="font-size: 16px">. Dit is een melding die in beeld komt doordat het inladen van externe scripts geblokkeerd wordt door de content security policy in het .htaccess bestand. Wanneer je font awesome en de Google fonts als uitzondering hieraan toevoegt dan zullen de meldingen verdwijnen. Zie ook onderstaande link voor meer informatie hierover:

Om bijvoorbeeld Font Awesome toe te staan voeg je de volgende regels toe in je .htaccess:

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|svg|otf|ttc|ttf|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>