{"id":2718,"date":"2019-04-17T17:34:26","date_gmt":"2019-04-17T17:34:26","guid":{"rendered":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/"},"modified":"2021-12-01T21:30:16","modified_gmt":"2021-12-01T21:30:16","slug":"what-web-developers-need-to-know-about-content-security-policy-2","status":"publish","type":"post","link":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/","title":{"rendered":"What Web Developers Need to Know About Content Security Policy"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2718\" class=\"elementor elementor-2718\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22b16231 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"22b16231\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7e0c7dda\" data-id=\"7e0c7dda\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ea75856 elementor-widget elementor-widget-text-editor\" data-id=\"ea75856\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<ul class=\"download\" style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><a href=\"https:\/\/www.codeproject.com\/KB\/web-security\/1426924\/csp_source.zip\">Download source &#8211; 358 B<\/a><\/li><\/ul><h2>Introduction<\/h2><p>Content Security Policy (CSP) is a computer security standard introduced by the World Wide Web Consortium (W3C) to prevent cross-site scripting (XSS) and clickjacking attacks. Explained simply, CSP is a whitelist of origins of content that is allowed to load or execute on a webpage. We\u2019ll look at the three versions of CSP and the relevant features of each, though it\u2019s important to note CSP Level 3 is not yet ratified as a W3C recommendation and is still a working draft in progress. It is still subject to change from time to time before its standardization. As we go along, the differences between these versions will be pointed out to you.<\/p><h2>What is Cross-Site Scripting?<\/h2><p>Cross-Site Scripting (XSS) attacks are a type of code injection, in which malicious scripts are injected into trusted websites. A good example could occur on an ecommerce site: a buyer posts a product review with malicious code that is saved on the server. For every customer who views the product review, malicious code gets executed.<\/p><h2>CSP in Action<\/h2><p>CSP can be specified in an HTTP response header. When a web client, like a web browser, requests a resource from web server, it sends an HTTP request with a bunch of information in a request header for the server. If the request is successful, the web server then replies back with the resource together with a response header telling the web browser how to handle the response. In the case of CSP, it is specifying what those trusted sources are to fetch the web page content from. On CSP 2 capable browsers, we have an additional option of specifying the CSP in an HTML meta tag. For our examples, this is exactly what we are going to use; we take a web framework agnostic approach to keep things simple. All you need to follow the examples is a text editor and modern web browser.<\/p><h2>Anatomy of CSP<\/h2><p>CSP begins with\u00a0<code>Content-Security-Policy<\/code>\u00a0text, which is followed by one or more directives. Each directive ends with a semicolon, which can be the beginning of the next directive. Each directive could have zero or multiple values. The values are separated by whitespace. More often than not, the value is simply a trusted source URI.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1890c2 elementor-widget elementor-widget-code-highlight\" data-id=\"c1890c2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>Content-Security-Policy [directive] <value>;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ffcc035 elementor-widget elementor-widget-text-editor\" data-id=\"ffcc035\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This is an example of a one-directive CSP. The\u00a0<code style=\"font-size: 16px;\">default-src<\/code>\u00a0directive with a \u2018<code style=\"font-size: 16px;\">self<\/code>\u2019 value instructs the web browser to only trust content from the same origin as the webpage.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4833674 elementor-widget elementor-widget-code-highlight\" data-id=\"4833674\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>Content-Security-Policy default-src 'self';<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35f30f4 elementor-widget elementor-widget-text-editor\" data-id=\"35f30f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The equivalent CSP in a\u00a0<code style=\"font-size: 16px;\">meta<\/code>\u00a0tag is shown below:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61cda66 elementor-widget elementor-widget-code-highlight\" data-id=\"61cda66\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self';><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5582b8a elementor-widget elementor-widget-text-editor\" data-id=\"5582b8a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Take note that the\u00a0<code>meta<\/code>\u00a0tag has to be specified within the\u00a0<code>head<\/code>\u00a0section, not the\u00a0<code>body<\/code>\u00a0section of the HTML. One big downside a developer has to be cautious of: with the\u00a0<code>meta<\/code>\u00a0tag approach, CSP rules are not enforced until the\u00a0<code>meta<\/code>\u00a0tag is read and processed.<\/p><p>This is the HTML that loads the image from CodeProject without CSP. You can copy and paste the code in an empty HTML file and save it locally.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f5bc3a elementor-widget elementor-widget-code-highlight\" data-id=\"5f5bc3a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><html>\r\n<head>\r\n<title>CSP\r\nin Action<\/title>\r\n<head>\r\n<body>\r\n<p><img\r\nsrc=\"https:\/\/www.codeproject.com\/App_Themes\/CodeProject\/Img\/logo250x135.gif\"\r\n\/>  <\/p>\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ee7d6c elementor-widget elementor-widget-text-editor\" data-id=\"8ee7d6c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>View the HTML on the browser by double-clicking the file on the File Explorer, the image is downloaded and displayed from CodeProject.<\/p><p><img decoding=\"async\" class=\"alignnone size-full wp-image-5127\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image001.png\" alt=\"\" width=\"250\" height=\"135\" \/><\/p><p>Let\u2019s add a CSP meta tag.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0579c1b elementor-widget elementor-widget-code-highlight\" data-id=\"0579c1b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><html>\r\n<head>\r\n<meta\r\nhttp-equiv=\"Content-Security-Policy\" content=\"default-src\r\n'self';\">\r\n<title>CSP\r\nin Action<\/title>\r\n<head>\r\n<body>\r\n<p><img\r\nsrc=\"https:\/\/www.codeproject.com\/App_Themes\/CodeProject\/Img\/logo250x135.gif\"\r\n\/>  <\/p>\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b612313 elementor-widget elementor-widget-text-editor\" data-id=\"b612313\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now try viewing the page in a browser:<\/p><p><img decoding=\"async\" class=\"alignnone size-full wp-image-5128\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image002.png\" alt=\"\" width=\"33\" height=\"40\" \/><\/p><p>Bam! Now the broken image is shown to indicate the image is not fetched because www.codeproject.com is not the same origin domain. Hit\u00a0<span style=\"font-weight: bolder;\">F12<\/span>\u00a0on the web browser to open developer tool and navigate to console tab. On Chrome, it shows this error in\u00a0<span class=\"emphasis\">red<\/span>.<\/p><p><span class=\"emphasis\">Refused to load the image &#8216;https:\/\/www.codeproject.com\/App_Themes\/CodeProject\/Img\/logo250x135.gif&#8217; because it violates the following Content Security Policy directive: &#8220;default-src &#8216;self'&#8221;. Note that &#8216;img-src&#8217; was not explicitly set, so &#8216;default-src&#8217; is used as a fallback.<\/span><\/p><p>What we have effectively done with the\u00a0<code>default-src<\/code>\u00a0directive is to restrict all the content to the same origin with the \u2018<code>self<\/code>\u2019 keyword, as explained previously.<\/p><p>Let\u2019s append\u00a0<code>default-src<\/code>\u00a0with a whitespace and followed by the CodeProject URI. For simplicity, I just show the updated\u00a0<code>meta<\/code>\u00a0tag as the rest of HTML remains unchanged.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d84c3e9 elementor-widget elementor-widget-code-highlight\" data-id=\"d84c3e9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'\r\nhttps:\/\/www.codeproject.com;\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bca3b4 elementor-widget elementor-widget-text-editor\" data-id=\"4bca3b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>View the page again. Now the CodeProject image is shown.\u00a0<span style=\"font-weight: bold;\">Note<\/span>:\u00a0The\u00a0<code>self<\/code>\u00a0keyword has to be enclosed in single quotes while the URI is not required to be.<\/p><p><img decoding=\"async\" class=\"alignnone size-full wp-image-5127\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image001.png\" alt=\"\" width=\"250\" height=\"135\" \/><\/p><p>View the HTML on browser. Now the image is back. Since the gif is an image resource, let\u2019s do some refactoring and put CodeProject URI under the\u00a0<code>img-src<\/code>\u00a0directive.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b5ea56 elementor-widget elementor-widget-code-highlight\" data-id=\"3b5ea56\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'; img-src \r\nhttps:\/\/www.codeproject.com;\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67be57b5 elementor-widget elementor-widget-text-editor\" data-id=\"67be57b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div><img decoding=\"async\" class=\"alignnone size-full wp-image-5127\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image001.png\" alt=\"\" width=\"250\" height=\"135\" style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"><br><\/div>\n<p>View the page on browser again. The image still appears. Prior to that, <code>img-src<\/code> is not specified. What is its value then? The answer is, when not specified, it inherits from <code>default-src<\/code>. <strong>Note<\/strong>: If your URI redirects to a URI on another domain, that domain has to be in the CSP as well.<\/p>\n<h2>CSP Directives<\/h2>\n<p>CSP directives mostly cover the content type whose source(s) can be specified. This article covers most of the directives. All the directives that fall back to the <code>default-src<\/code> are shown on the hierarchy below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5130\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image003.png\" alt=\"\" width=\"624\" height=\"389\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image003.png 624w, https:\/\/contentlab.com\/wp-content\/uploads\/2019\/04\/image003-300x187.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<ul>\n<li><code>default-src<\/code>: Is a main fallback for the other fetch directives when they are not explicitly specified<\/li>\n<li><code>child-src<\/code>: Lists the trusted sources for web workers and nested browsing contexts loaded using elements such as <code>&lt;frame&gt;<\/code> and <code>&lt;iframe&gt;<\/code>. This directive is deprecated in CSP 3. Instead of <code>child-src<\/code>, to list trusted source for nested browsing contexts and workers, the <code>frame-src<\/code> and <code>worker-src<\/code> directives should be used respectively.<\/li>\n<li><code>script-src<\/code>: Lists trusted sources for <a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a><\/li>\n<li><code>object-src<\/code>: Lists trusted sources for the <code>&lt;object&gt;<\/code>, <code>&lt;embed&gt;<\/code>, and <code>&lt;applet&gt;<\/code> elements<\/li>\n<li><code>style-src<\/code>: Lists trusted sources for stylesheets (CSS)<\/li>\n<li><code>img-src<\/code>: Lists trusted sources of images and favicons<\/li>\n<li><code>media-src<\/code>: Lists trusted sources for loading media using the <code>&lt;audio&gt;<\/code>, <code>&lt;video&gt;<\/code> and <code>&lt;track&gt;<\/code> elements<\/li>\n<li><code>frame-src<\/code>: Lists trusted sources for nested browsing contexts loading using elements such as <code>&lt;frame&gt;<\/code> and <code>&lt;iframe&gt;<\/code><\/li>\n<li><code>font-src<\/code>: Lists trusted sources for fonts loaded using <code>@font-face<\/code><\/li>\n<li><code>connect-src<\/code>: Limits the URLs which can be loaded using script interfaces. Script interfaces include <code>&lt;a&gt; ping<\/code>, <code>Fetch<\/code>, <code>XMLHttpRequest<\/code>, <code>WebSocket<\/code> and <code>EventSource<\/code><\/li>\n<li><code>worker-src<\/code>: Lists trusted sources for <code>Worker<\/code>, <code>SharedWorker<\/code>, or <code>ServiceWorker<\/code> scripts<\/li>\n<li><code>base-uri<\/code>: Limits the URLs which can be used in a document&#8217;s <code>&lt;base&gt;<\/code> element<\/li>\n<li><code>plugin-types<\/code>: Limits the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded. For example, to allow Flash, specify its mime type: <code>application\/x-shockwave-flash<\/code> in this directive<\/li>\n<li><code>sandbox<\/code>: Put the resource under a sandbox similar to the <code>&lt;iframe&gt;<\/code> <code>sandbox<\/code> attribute.<\/li>\n<li><code>form-action<\/code>: Limits the URLs which can be used as the target of a form submissions from a given context<\/li>\n<li><code>frame-ancestors:<\/code> Limits valid parents that may embed a page using <code>&lt;frame&gt;<\/code>, <code>&lt;iframe&gt;<\/code>, <code>&lt;object&gt;<\/code>, <code>&lt;embed&gt;<\/code>, or <code>&lt;applet&gt;<\/code><\/li>\n<li><code>report-uri<\/code>: List URL for the web browser to report the Content Security Policy violation. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI. Deprecated in CSP 3, but still widely supported<\/li>\n<li><code>report-to<\/code>: <code>report-uri<\/code> (mentioned above) has been renamed to <code>report-to<\/code> and <code>report-uri<\/code> is deprecated in CSP 3. However, at the time of article writing, not a single browser supports <code>report-to<\/code>. It is perfectly fine to specify both <code>report-uri<\/code> and <code>report-to<\/code> to future-proof CSP<\/li>\n<li><code>block-all-mixed-content<\/code>: Forbids loading any assets using HTTP when the page is loaded using HTTPS<\/li>\n<li><code>upgrade-insecure-requests<\/code>: Instructs web browser to treat all of a site&#8217;s insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS). This directive is intended for web sites with large numbers of insecure legacy URLs that need to be rewritten.<\/li>\n<li><code>require-sri-for<\/code>: Requires the use of Subresource Integrity (SRI) for external scripts or styles on the page<\/li>\n<\/ul>\n<h2>CSP Values<\/h2>\n<p>Each directive follows by one or more values separated by whitespace. The acceptable value types are in two main categories: keywords and URI.<\/p>\n<p>All keyword, except wildcard, must be enclosed in single quotes:<\/p>\n<ul>\n<li>\u2018<code>self<\/code>\u2019: Restrict source to same origin<\/li>\n<li>\u2018<code>none<\/code>\u2019: No source is allowed<\/li>\n<li><code>*<\/code>: wildcard<\/li>\n<li>\u2018<code>unsafe-inline<\/code>\u2019: Allows the inline <a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a> code and stylesheet<\/li>\n<li>\u2018<code>unsafe-eval<\/code>\u2019: Allows dynamic JavaScript through <code>eval()<br><br><\/code><\/li>\n<\/ul>\n<p>One very common reason to specify external trusted source URI other than the same origin is the need to support loading resource from a Content Delivery Network (CDN), a geographically distributed network of proxy servers that store commonly downloaded content.<\/p>\n<p>URIs must not be enclosed in single quotes!<\/p>\n<p>In CSP 1, only the scheme (http or https), domain and port number are allowed in the URI.<\/p>\n<pre lang=\"text\">https:\/\/example.com:80\/<\/pre>\n<p>Whereas in CSP 2, subdomains and paths are allowed. This URI allows all files in the <em>js<\/em> folder:<\/p>\n<pre lang=\"text\">https:\/\/example.com:80\/js\/<\/pre>\n<p>This URI treats <em>js<\/em> as file, not a folder, as it is not ended with a forward slash:<\/p>\n<pre lang=\"text\">https:\/\/example.com:80\/js<\/pre>\n<p>To allow all subdomains, use an asterisk as a wildcard.<\/p>\n<pre lang=\"text\">https:\/\/*. example.com:80\/<\/pre>\n<h2>Conclusion<\/h2>\n<p>In the article, we have seen CSP put to good use in restricting the source of resource to eliminate the possibility of running\/displaying untrusted contents. As a word of caution, utmost care must be undertaken by the developer to ensure that all sources needed by the webpage are not overlooked and omitted in the CSP, causing functionality to break, denying service to the user.<\/p>\n<p><em>This article was originally posted on <a href=\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2\">CodeProject<\/a>.<br><\/em><\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This article discusses what web developers need to know about content security policy.<\/p>\n","protected":false},"author":3,"featured_media":5256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[273,272,297],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What Web Developers Need to Know About Content Security Policy &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Web Developers Need to Know About Content Security Policy &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"This article discusses what web developers need to know about content security policy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-17T17:34:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-01T21:30:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"What Web Developers Need to Know About Content Security Policy\",\"datePublished\":\"2019-04-17T17:34:26+00:00\",\"dateModified\":\"2021-12-01T21:30:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/\"},\"wordCount\":1439,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png\",\"keywords\":[\"HTML\",\"JavaScript\",\"XSS\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/\",\"url\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2\",\"name\":\"What Web Developers Need to Know About Content Security Policy &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png\",\"datePublished\":\"2019-04-17T17:34:26+00:00\",\"dateModified\":\"2021-12-01T21:30:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What Web Developers Need to Know About Content Security Policy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Web Developers Need to Know About Content Security Policy &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2","og_locale":"en_US","og_type":"article","og_title":"What Web Developers Need to Know About Content Security Policy &#183; Technical Content Marketing | ContentLab","og_description":"This article discusses what web developers need to know about content security policy.","og_url":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-04-17T17:34:26+00:00","article_modified_time":"2021-12-01T21:30:16+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#article","isPartOf":{"@id":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"What Web Developers Need to Know About Content Security Policy","datePublished":"2019-04-17T17:34:26+00:00","dateModified":"2021-12-01T21:30:16+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/"},"wordCount":1439,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png","keywords":["HTML","JavaScript","XSS"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy-2\/","url":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2","name":"What Web Developers Need to Know About Content Security Policy &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage"},"image":{"@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png","datePublished":"2019-04-17T17:34:26+00:00","dateModified":"2021-12-01T21:30:16+00:00","breadcrumb":{"@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"What Web Developers Need to Know About Content Security Policy"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/17.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2718"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2718"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2718\/revisions"}],"predecessor-version":[{"id":6201,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2718\/revisions\/6201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5256"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2718"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}