{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/how-to-set-up-csp-for-ftw/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How to set up Content Security Policy (CSP) for FTW","slug":"how-to-set-up-csp-for-ftw","updated":"2019-01-25T00:00:00.000Z","category":"ftw-security","ingress":"This guide describes how to set up CSP for Flex Template for Web (FTW).","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"According to\n"},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"MDN"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Content Security Policy (CSP) is an added layer of security that helps\nto detect and mitigate certain types of attacks, including Cross Site\nScripting (XSS) and data injection attacks. These attacks are used for\neverything from data theft to site defacement or distribution of\nmalware."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the CSP is disabled in FTW. By turning it on, the default\nwhitelist in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/server/csp.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"server/csp.js"}]},{"type":"text","value":"\nworks with the all the URLs and tools that come with the application."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"turn-on-the-csp","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#turn-on-the-csp","ariaLabel":"turn on the csp permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Turn on the CSP"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The CSP is configured using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_CSP"}]},{"type":"text","value":" environment variable."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Possible values:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"not set: disabled"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_CSP=report"}]},{"type":"text","value":": Enabled, but policy violations are only\nreported"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_CSP=block"}]},{"type":"text","value":": Enabled. Policy violations are reported and\nrequests that violate the policy are blocked"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If error logging with Sentry is enabled (See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-set-up-sentry/"},"children":[{"type":"text","value":"How to set up Sentry to log errors in FTW "}]},{"type":"text","value":"\nguide), the reports are sent to Sentry. Otherwise the reports are just\nlogged in the backend."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"optional-extend-the-policy","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#optional-extend-the-policy","ariaLabel":"optional extend the policy permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Optional: Extend the policy"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to whitelist new sources (for example adding a new external\nanalytics service) and keep the CSP enabled, you should add the domains\nto the white list in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/server/csp.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"server/csp.js"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The easiest way to do this is to first turn on the policy in report mode\nand then see what policy violations are logged to the browser developer\nconsole or to the backend policy violation report URL."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"resources","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#resources","ariaLabel":"resources permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Resources"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To understand what CSP is and how browsers work, here are some\nresources:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://content-security-policy.com/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://content-security-policy.com/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://ponyfoo.com/articles/content-security-policy-in-express-apps","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://ponyfoo.com/articles/content-security-policy-in-express-apps"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://helmetjs.github.io/docs/csp/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://helmetjs.github.io/docs/csp/"}]}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"headings":[{"value":"Turn on the CSP","depth":2},{"value":"Optional: Extend the policy","depth":2},{"value":"Resources","depth":2}]}},"pageContext":{"slug":"how-to-set-up-csp-for-ftw","category":"ftw-security"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}