CSP-Header 4.3.69+

Vanaf TriplEforms 4.3.69 en hoger is de CSP-header geïntegreerd in TriplEforms. De CSP-header is een complex iets en schroom niet om hier hulp bij te vragen. In dit artikel leggen we uit wat het inhoudt en hoe we de header binnen TriplEforms gebruiken.

Let op: Je kan niet zomaar naar deze build upgrade. Daarvoor moet er een aanpassing worden gedaan in de website en moet deze opnieuw worden opgeleverd! Dit moet om aan de TPM van 4.3 te kunnen voldoen! Dit geldt zowel voor de standaard TriplEforms als de MijnOmgeving variant.

Wat is een CSP-header?

Content-Security-Policy is een extra laag van beveiliging ontworpen ter voorkoming van gebruikelijke hack-aanvallen zoals XSS (Cross Site Scripting) en injectie attacks. Deze beveiliging wordt geactiveerd middels een CSP-header, een speciaal type HTTP-response header waarin nauwgezet gespecificeerd kan worden welke bronnen, datatypen, scripts, styles en meer toegestaan worden. Alles wat buiten de gespecificeerde bronnen staat zal worden geblokkeerd. Dit maakt het een stuk moeilijker voor kwaadwillende personen om Javascript te injecteren, clickjacking toe te passen, frame attacks uit te voeren, en meer.

Waarom wordt de CSP-Header vanuit TriplEforms bepaald;

De header wordt nu vanuit TriplEforms bepaald om een nonce aan inline scripting toe te voegen. Dit houdt dat wij onze eigen scripts in de website kunnen valideren. Ook moeten we externe libraries goedkeuring geven d.m.v. een hash toe te voegen om bewerkingen te kunnen doen aan de website. Zo zorgen we voor een gecontroleerde en veilige website;

Uitleg configuratie CSP-header

Een typische CSP-header bestaat uit aantal directives. Directives worden opgedeeld in de volgende categorieën:

•  Fetch directives

Fetch directives zijn bedoeld om de oorsprong van specifieke brontypes aan banden te leggen. Voorbeelden van fetch directives zijn: script-src, img-src en frame-src.

• Document directives

Document directives kunnen gebruikt worden om HTML-documenten te filteren aan de hand van de eigenschappen van dat document. Voorbeelden zijn: base-uri, plugin-types en sandbox.

• Navigation directives

Navigation directives kunnen gebruikt worden om te kunnen beperken waar gebruikers heen kunnen navigeren na bijvoorbeeld een form submit, of het klikken van een hyperlink. Voorbeelden zijn: form-action, frame-ancestors en navigate-to.    

• Reporting directives

Met de reporting directives kun je bepalen waar CSP-overtredingen worden gerapporteerd. De twee directives in deze categorie zijn: report-uri en report-to.

• Other directives

De laatste categorie bevat een aantal directives die niet in te delen zijn onder een eigen categorie. Voorbeelden zijn: block-all-mixed-content, referrer en require-sri-for.

Je kan geen inline-scripts meer gebruiken, deze worden door de CSP-header geblokkeerd. Je kan mag ook niet met de setting unsafe-eval gebruiken om toch inline scripting toe te staan. Daarmee breng je de beveiliging tot een lager niveau. 

TriplEforms en de CSP-Header

Vanaf build 4.3.69 is de CSP ingebouwd in de TriplEforms. Dit houdt dat TriplEforms zelf de CSP-header opbouwt. TriplEforms legt de basis van de CSP-header zodat de standaard werking van TriplEforms, html,javascript en css wordt vertrouwd. Aanvullende zaken zoals google analytics kunnen worden toegevoegd. Hieronder leggen we uit hoe we de CSP moeten configureren

Wat heb je nodig;

Web.config toevoegingen;

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <configSections>
        <section name="kodision.tripleforms.cspmodule" type="Kodision.TriplEforms.Engine.HttpModules.CspModule.Configuration.CspModuleConfigurationSection, Kodision.TriplEforms.Engine, Version=4.3.0.0, Culture=neutral, PublicKeyToken=3293b934dd649f43"/>
    </configSections>
</configuration>

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <kodision.tripleforms.cspmodule cspHeader="default-src 'self'; frame-src 'self'; frame-ancestors 'self'; style-src 'self'; script-src 'self';">
    <styleHashes>
      <hash hash="{alg-hash}" description="hash used for XYZ"/>
    </styleHashes>
    <scriptHashes>
      <hash hash="{alg-hash}" description="hash used for XYZ"/>
    </scriptHashes>
    <directives>
      <replace replace="child-src" name="child-source"/>
    </directives>
    <eventRewrites>
      <eventRewrite sourceEvent="mycustomevent" targetEvent="mycustomtargetevent"/>
    </eventRewrites>
  </kodision.tripleforms.cspmodule>
</configuration>

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <modules>
      <add name="CspModule" type="Kodision.TriplEforms.Engine.HttpModules.CspModule.CspModule, Kodision.TriplEforms.Engine, Version=4.3.0.0, Culture=neutral, PublicKeyToken=3293b934dd649f43"/>
    </modules>
  </system.webServer>
</configuration>

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <compilation debug="false" targetFramework="4.7.2">
      <assemblies>  
        <add assembly="System.Web.Optimization, Version=1.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </assemblies>
    </compilation>
  </system.web>
</configuration>

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral"/>
        <bindingRedirect oldVersion="0.0.0.0-1.6.5135.21930" newVersion="1.6.5135.21930"/>
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

Verwijder bestaande CSP-configuratie

Voorgaand op build 69 was het gebruikelijk om de CSP-header in de customheaders te configureren.

•    De CSP-header staat onder <customHeaders> 

Verwijder de <add> regel die de CSP-header bevat uit <customHeaders> en voeg de waarde van die bestaande CSP-header toe aan de nieuwe cspHeader.

Voeg <remove name="Content-Security-Policy"/> toe aan <customHeaders>, dit blokkeert de CSP-header die afkomstig is van de server.

MijnOmgeving extra aanpassingen

• styleHashes

Onder styleHashes kunnen speciale hashes worden geplaatst die nodig kunnen zijn voor bepaalde inline scripts. Bijvoorbeeld, voor TemplateMijnOmgeving zijn standaard een aantal sha-256 hashes nodig om modernizr te laten werken:

Om uit te vinden of je dit soort hashes nodig hebt is aan te raden een uitgebreide regressietest uit te voeren op de website in kwestie. Let daarbij op dit soort fouten in de console van de browser:

De hash die te zien is in de fout kan je vervolgens opnemen onder styleHashes. Het description attribuut heeft geen functie, maar is handig om op te schrijven waar de hash toe dient.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <kodision.tripleforms.cspmodule cspHeader="default-src 'self'; frame-src 'self'; frame-ancestors 'self'; syle-src 'self'; script-src 'self';">
    <styleHashes>
      <!-- Default CSS hashes for modernizr -->
      <hash hash="sha256-CwE3Bg0VYQOIdNAkbB/Btdkhul49qZuwgNCMPgNY5zw=" description="Used for modernizr"/>
      <hash hash="sha256-MZKTI0Eg1N13tshpFaVW65co/LeICXq4hyVx6GWVlK0=" description="Used for modernizr"/>
      <hash hash="sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=" description="Used for modernizr"/>
      <hash hash="sha256-YJO/M9OgDKEBRKGqp4Zd07dzlagbB+qmKgThG52u/Mk=" description="Used for modernizr"/>
    </styleHashes>
    <scriptHashes>
      <hash hash="{alg-hash}" description="hash used for XYZ"/>
    </scriptHashes>
    <directives>
      <replace replace="child-src" name="child-source"/>
    </directives>
    <eventRewrites>
      <eventRewrite sourceEvent="mycustomevent" targetEvent="mycustomtargetevent"/>
    </eventRewrites>
  </kodision.tripleforms.cspmodule>
</configuration>

Naast de toevoeging op de web.config moet de gecompileerde versie van de mijnOmgeving ook worden vervangen met de versie van 4.3.69+

Javascript controleren

Een essentiële stap, het controleren van maatwerk javascript en apart ingeladen libraries. Voordat deze handleiding wat nuttige tips geeft zal er eerst worden uitgelegd wat er verstaan wordt onder ‘slechte’ Javascript.

String evaluation

Binnen Javascript zijn er verschillende manieren om string evaluation uit te voeren. Dit is ogenschijnlijk een krachtige feature van Javascript, hiermee kun je bijvoorbeeld een functie uitvoeren die als string wordt weergegeven. Een bekend voorbeeld hiervan is eval().

Als we dit uitvoeren in de console van Developer Tools krijgen we netjes een alert te zien:

Hetzelfde geldt voor een setTimeout die we als volgt opbouwen:

Na dit uit te voeren krijgen we na 1 seconde het verwachte te zien in de console:

Maar als we een CSP-header actief hebben kunnen we de eerdere code niet meer uitvoeren. Bij eval() krijgen we dan:

En bij setTimeout() krijgen we:

In beide gevallen wordt de string evaluation niet uitgevoerd omdat een CSP-header actief en we geen ‘unsafe-eval’ toestaan (wat een goede zaak is, dat wil je inderdaad niet).

Dit gedrag treedt op bij de volgende functies:

-    eval()

-    setTimeout() (alleen als het eerste argument een string is)

-    setInterval() (alleen als het eerste argument een string is)

-    new Function() (dus niet function(){} maar new Function (hoofdletter, dus niet keyword!))

-    setImmediate() (alleen beschikbaar in IE10)

-    execScript() (alleen beschikbaar in IE10)

Het is dus zaak om alle scripts na te lopen en checken of een of meerdere van de bovenstaande functies gebruikt worden en, waar mogelijk, deze om te schrijven naar een variant waarbij geen string evaluation wordt gedaan. Ons eerdere voorbeeld met de setTimeout kan immers als volgt worden uitgevoerd:

Of

Het eerste voorbeeld is technisch gezien correct, maar voert direct de console.log uit zonder te wachten op de opgegeven 1000ms. Het punt is dat op deze manier geen string evaluation plaatsvindt. De meest correcte variant in dit geval is voorbeeld 2. Dit is ook de manier waarop de CspModule gevonden setTimeout en setInterval tracht om te schrijven.

Scripts in formulieren

Het is TriplEforms mogelijk om dit soort constructies op te nemen in je formulier:

We kunnen stukjes Javascript opnemen in onze formulieren om zo extra interactiviteit in te bouwen, berekeningen te doen, uitstapjes naar webservers enz. Hier geldt dus dat alle ‘slechte’ Javascript zoals eerder beschreven niet in mag staan. Controleer dus je formulieren. Daaropvolgend is het mogelijk om externe libraries in te laden.. Als de bron niet is opgenomen in de CSP-header zal deze externe library niet worden ingeladen. Het script, mits veilige script, zal wel worden uitgevoerd omdat de CspModule de script tag zal voorzien van een nonce. 

TriplEforms Editor

In de editor zal de CSP header niet werken, dit komt omdat de editor niet in IIS draait maar IIS express. Daarom kan de csp header daar niet in getest worden.

Foutmeldingen en betekenis

Melding

Wanneer je bij het starten van de website de volgende fout melding krijg: " CspModule cannot be used in combination with a Content-Security-Policy header set in system.webServer.httpProtocol.customHeaders. Move this header to the kodision.tripleforms.cspmodule.cspHeader property, or clear the header. Any value moved to the aforementioned property will be combined with the generated Content-Security-Policy directives into a new Content-Security-Policy header."

Oplossing

De CSP header mag niet 2x in de website staan. Haal de customHeaders weg en gebruik alleen de cspmodule in de web.config