{"id":2717,"date":"2021-10-05T00:44:21","date_gmt":"2021-10-05T00:44:21","guid":{"rendered":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy\/"},"modified":"2021-11-16T15:31:25","modified_gmt":"2021-11-16T15:31:25","slug":"what-web-developers-need-to-know-about-content-security-policy","status":"publish","type":"post","link":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy\/","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=\"2717\" class=\"elementor elementor-2717\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-74693f4b elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"74693f4b\" 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-6fa7884c\" data-id=\"6fa7884c\" 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-60d7cc2 elementor-widget elementor-widget-text-editor\" data-id=\"60d7cc2\" 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\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">web<\/a>\u00a0server, 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-2dfb137 elementor-widget elementor-widget-code-highlight\" data-id=\"2dfb137\" 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-ca15b68 elementor-widget elementor-widget-text-editor\" data-id=\"ca15b68\" 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-3c1377c elementor-widget elementor-widget-code-highlight\" data-id=\"3c1377c\" 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-d210e65 elementor-widget elementor-widget-text-editor\" data-id=\"d210e65\" 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-834da3a elementor-widget elementor-widget-code-highlight\" data-id=\"834da3a\" 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-cb6b2ca elementor-widget elementor-widget-text-editor\" data-id=\"cb6b2ca\" 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\u00a0<a href=\"https:\/\/www.codeproject.com\/Articles\/1426924\/What-Web-Developers-Need-to-Know-About-Content-S-2\">CodeProject<\/a>\u00a0without 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-f01841f elementor-widget elementor-widget-code-highlight\" data-id=\"f01841f\" 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-2a4ad15 elementor-widget elementor-widget-text-editor\" data-id=\"2a4ad15\" 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\" src=\"https:\/\/www.codeproject.com\/KB\/web-security\/1426924\/image001.png\" width=\"250px\" height=\"135px\" \/><\/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-2c76e83 elementor-widget elementor-widget-code-highlight\" data-id=\"2c76e83\" 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-76d04b5 elementor-widget elementor-widget-text-editor\" data-id=\"76d04b5\" 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\" src=\"https:\/\/www.codeproject.com\/KB\/web-security\/1426924\/image002.png\" width=\"33px\" height=\"40px\" \/><\/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-5f56440 elementor-widget elementor-widget-code-highlight\" data-id=\"5f56440\" 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-b45c5a0 elementor-widget elementor-widget-text-editor\" data-id=\"b45c5a0\" 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\" style=\"height: 135px; width: 250px;\" src=\"https:\/\/www.codeproject.com\/KB\/web-security\/1426924\/image001.png\" \/><\/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-6b7a038 elementor-widget elementor-widget-code-highlight\" data-id=\"6b7a038\" 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-3f6c6b3 elementor-widget elementor-widget-text-editor\" data-id=\"3f6c6b3\" 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><img decoding=\"async\" src=\"https:\/\/www.codeproject.com\/KB\/web-security\/1426924\/image001.png\" width=\"250px\" height=\"135px\" \/><\/p><p>View the page on browser again. The image still appears. Prior to that,\u00a0<code>img-src<\/code>\u00a0is not specified. What is its value then? The answer is, when not specified, it inherits from\u00a0<code>default-src<\/code>.\u00a0<span style=\"font-weight: bolder;\">Note<\/span>: If your URI redirects to a URI on another domain, that domain has to be in the CSP as well.<\/p><h2>CSP Directives<\/h2><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\u00a0<code>default-src<\/code>\u00a0are shown on the hierarchy below.<\/p><p><img decoding=\"async\" style=\"height: 389px; width: 624px;\" src=\"https:\/\/www.codeproject.com\/KB\/web-security\/1426924\/image003.png\" \/><\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><code>default-src<\/code>: Is a main fallback for the other fetch directives when they are not explicitly specified<\/li><li style=\"font-size: 16px;\"><code>child-src<\/code>: Lists the trusted sources for web workers and nested browsing contexts loaded using elements such as\u00a0<code>&lt;frame&gt;<\/code>\u00a0and\u00a0<code>&lt;iframe&gt;<\/code>. This directive is deprecated in CSP 3. Instead of\u00a0<code>child-src<\/code>, to list trusted source for nested browsing contexts and workers, the\u00a0<code>frame-src<\/code>\u00a0and\u00a0<code>worker-src<\/code>\u00a0directives should be used respectively.<\/li><li style=\"font-size: 16px;\"><code>script-src<\/code>: Lists trusted sources for JavaScript<\/li><li style=\"font-size: 16px;\"><code>object-src<\/code>: Lists trusted sources for the\u00a0<code>&lt;object&gt;<\/code>,\u00a0<code>&lt;embed&gt;<\/code>, and\u00a0<code>&lt;applet&gt;<\/code>\u00a0elements<\/li><li style=\"font-size: 16px;\"><code>style-src<\/code>: Lists trusted sources for stylesheets (CSS)<\/li><li style=\"font-size: 16px;\"><code>img-src<\/code>: Lists trusted sources of images and favicons<\/li><li style=\"font-size: 16px;\"><code>media-src<\/code>: Lists trusted sources for loading media using the\u00a0<code>&lt;audio&gt;<\/code>,\u00a0<code>&lt;video&gt;<\/code>\u00a0and\u00a0<code>&lt;track&gt;<\/code>\u00a0elements<\/li><li style=\"font-size: 16px;\"><code>frame-src<\/code>: Lists trusted sources for nested browsing contexts loading using elements such as\u00a0<code>&lt;frame&gt;<\/code>\u00a0and\u00a0<code>&lt;iframe&gt;<\/code><\/li><li style=\"font-size: 16px;\"><code>font-src<\/code>: Lists trusted sources for fonts loaded using\u00a0<code>@font-face<\/code><\/li><li style=\"font-size: 16px;\"><code>connect-src<\/code>: Limits the URLs which can be loaded using script interfaces. Script interfaces include\u00a0<code>&lt;a&gt; ping<\/code>,\u00a0<code>Fetch<\/code>,\u00a0<code>XMLHttpRequest<\/code>,\u00a0<code>WebSocket<\/code>\u00a0and\u00a0<code>EventSource<\/code><\/li><li style=\"font-size: 16px;\"><code>worker-src<\/code>: Lists trusted sources for\u00a0<code>Worker<\/code>,\u00a0<code>SharedWorker<\/code>, or\u00a0<code>ServiceWorker<\/code>\u00a0scripts<\/li><li style=\"font-size: 16px;\"><code>base-uri<\/code>: Limits the URLs which can be used in a document&#8217;s\u00a0<code>&lt;base&gt;<\/code>\u00a0element<\/li><li style=\"font-size: 16px;\"><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:\u00a0<code>application\/x-shockwave-flash<\/code>\u00a0in this directive<\/li><li style=\"font-size: 16px;\"><code>sandbox<\/code>: Put the resource under a sandbox similar to the\u00a0<code>&lt;iframe&gt;<\/code>\u00a0<code>sandbox<\/code>\u00a0attribute.<\/li><li style=\"font-size: 16px;\"><code>form-action<\/code>: Limits the URLs which can be used as the target of a form submissions from a given context<\/li><li style=\"font-size: 16px;\"><code>frame-ancestors:<\/code>\u00a0Limits valid parents that may embed a page using\u00a0<code>&lt;frame&gt;<\/code>,\u00a0<code>&lt;iframe&gt;<\/code>,\u00a0<code>&lt;object&gt;<\/code>,\u00a0<code>&lt;embed&gt;<\/code>, or\u00a0<code>&lt;applet&gt;<\/code><\/li><li style=\"font-size: 16px;\"><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><li style=\"font-size: 16px;\"><code>report-to<\/code>:\u00a0<code>report-uri<\/code>\u00a0(mentioned above) has been renamed to\u00a0<code>report-to<\/code>\u00a0and\u00a0<code>report-uri<\/code>\u00a0is deprecated in CSP 3. However, at the time of article writing, not a single browser supports\u00a0<code>report-to<\/code>. It is perfectly fine to specify both\u00a0<code>report-uri<\/code>\u00a0and\u00a0<code>report-to<\/code>\u00a0to future-proof CSP<\/li><li style=\"font-size: 16px;\"><code>block-all-mixed-content<\/code>: Forbids loading any assets using HTTP when the page is loaded using HTTPS<\/li><li style=\"font-size: 16px;\"><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><li style=\"font-size: 16px;\"><code>require-sri-for<\/code>: Requires the use of Subresource Integrity (SRI) for external scripts or styles on the page<\/li><\/ul><h2>CSP Values<\/h2><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><p>All keyword, except wildcard, must be enclosed in single quotes:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">\u2018<code>self<\/code>\u2019: Restrict source to same origin<\/li><li style=\"font-size: 16px;\">\u2018<code>none<\/code>\u2019: No source is allowed<\/li><li style=\"font-size: 16px;\"><code>*<\/code>: wildcard<\/li><li style=\"font-size: 16px;\">\u2018<code>unsafe-inline<\/code>\u2019: Allows the inline\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0code and stylesheet<\/li><li style=\"font-size: 16px;\">\u2018<code>unsafe-eval<\/code>\u2019: Allows dynamic JavaScript through\u00a0<code>eval()<\/code><\/li><\/ul><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><p>URIs must not be enclosed in single quotes!<\/p><p>In CSP 1, only the scheme (http or https), domain and port number are allowed in the 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-c492e3c elementor-widget elementor-widget-code-highlight\" data-id=\"c492e3c\" 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> https:\/\/example.com:80\/<\/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-d4c2dc2 elementor-widget elementor-widget-text-editor\" data-id=\"d4c2dc2\" 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>Whereas in CSP 2, subdomains and paths are allowed. This URI allows all files in the\u00a0<em>js<\/em>\u00a0folder:<\/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-0972126 elementor-widget elementor-widget-code-highlight\" data-id=\"0972126\" 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>https:\/\/example.com:80\/js\/<\/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-e88e1e4 elementor-widget elementor-widget-text-editor\" data-id=\"e88e1e4\" 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 URI treats\u00a0<em>js<\/em>\u00a0as file, not a folder, as it is not ended with a forward slash:<\/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-5f8cd16 elementor-widget elementor-widget-code-highlight\" data-id=\"5f8cd16\" 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>https:\/\/example.com:80\/js<\/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-29b6e85 elementor-widget elementor-widget-text-editor\" data-id=\"29b6e85\" 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>To allow all subdomains, use an asterisk as a wildcard.<\/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-dce3458 elementor-widget elementor-widget-code-highlight\" data-id=\"dce3458\" 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>https:\/\/*. example.com:80\/<\/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-253c5e5e elementor-widget elementor-widget-text-editor\" data-id=\"253c5e5e\" 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>&nbsp;<span style=\"color: rgb(0, 178, 169); font-size: 2rem;\">Conclusion<\/span><\/div>\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><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>In the article we put CSP to good use in restricting the source of resource to eliminate the possibility of running\/displaying untrusted contents.<\/p>\n","protected":false},"author":3,"featured_media":4869,"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,287,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=\"In the article we put CSP to good use in restricting the source of resource to eliminate the possibility of running\/displaying untrusted contents.\" \/>\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=\"2021-10-05T00:44:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-16T15:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/05\/4.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\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"What Web Developers Need to Know About Content Security Policy\",\"datePublished\":\"2021-10-05T00:44:21+00:00\",\"dateModified\":\"2021-11-16T15:31:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy\/\"},\"wordCount\":1433,\"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\/2020\/05\/4.png\",\"keywords\":[\"HTML\",\"Web\",\"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\/\",\"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\/2020\/05\/4.png\",\"datePublished\":\"2021-10-05T00:44:21+00:00\",\"dateModified\":\"2021-11-16T15:31:25+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\/2020\/05\/4.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/05\/4.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":"In the article we put CSP to good use in restricting the source of resource to eliminate the possibility of running\/displaying untrusted contents.","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":"2021-10-05T00:44:21+00:00","article_modified_time":"2021-11-16T15:31:25+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/05\/4.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\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"What Web Developers Need to Know About Content Security Policy","datePublished":"2021-10-05T00:44:21+00:00","dateModified":"2021-11-16T15:31:25+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/what-web-developers-need-to-know-about-content-security-policy\/"},"wordCount":1433,"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\/2020\/05\/4.png","keywords":["HTML","Web","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\/","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\/2020\/05\/4.png","datePublished":"2021-10-05T00:44:21+00:00","dateModified":"2021-11-16T15:31:25+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\/2020\/05\/4.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/05\/4.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\/2020\/05\/4.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2717"}],"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=2717"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2717\/revisions"}],"predecessor-version":[{"id":5376,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2717\/revisions\/5376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4869"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2717"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}