Content Security Policies
Allows a site to declare trusted sources of content (JS execution, CSS styles, images etc).
A Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.
In most cases Stacklane makes using Content Security Policies automatic, by using the content of the HTML view to create a reasonable policy. Policies may also be customized for specific cases.
Automatic Behavior
HTML views are automatically analyzed to create a reasonable CSP file, without any further effort on your part. The following elements are checked:
<script src=" ... >
<link rel="stylesheet" href=" ... >
- Inline
<script>
elements become a CSP hash source. - Inline
<style>
elements become a CSP hash source.
Restrictions
- Inline style attributes
style="..."
are not allowed. - Inline JavaScript via attributes
onclick="..."
, etc, are not allowed.
Custom Declarations
Include the following tag anywhere in the body:
<link itemprop="content-security-policy" ... >
This tag supports the following properties:
data-connect-self="true"
— allows AJAX connections to the same web app. Default: true.data-form-self="true"
— allows AJAX connections to the same web app. Default: true.data-img-src-data="true"
— allows "data:" as an image source in CSS (not recommended). Default: false.
Additional CSP
Local or external JavaScript may have further dependencies &mdash for example it may connect to another API, or require fonts.
In that case it may be necessary to specify additional Content-Security-Policy information.
frame-src, script-src, connect-src, style-src, and font-src may be specified directly on the <script>
element:
<script src="https://cdn.asset.com/file.js"
data-frame-src="https://frame.asset.com/"
data-connect-src="https://connect.asset.com/"
data-style-src="https://style.asset.com/"
data-font-src="https://font.asset.com/"
data-img-src="https://img.asset.com/"
data-script-src="https://script.asset.com/"></script>
Similarly they may be specified on the <link>
element for stylesheets:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css"
integrity="sha256-nZuLDiukZ8m5pnOiJdxK1IjXsQ2qbZB1R6x0ddFRyog=" crossorigin="anonymous"
data-font-src="https://cdn.jsdelivr.net/npm/hack-font@3.3.0/">