Docs/security in gatsby #22395

luizcieslak · 2020-03-19T04:31:02Z

Hi! I had some question while doing this writing and I'd like a feedback:

Should I write about GDPR rules in this doc?
In Third-party Scripts section I thought about recommending Ackee, which is a open-source self-hosted analytics alternative. Should I?
Is CSRF section relevant even when the solutions are backend only?

Also, I did not read Alex Moon's blog post entirely yet to not become biased. If there is some topics that you see important to have here please let me know.

Description

A documentation page for Security in Gatsby :)

Documentation

It is a documentation itself.

Related Issues

closes #13305

moonmeister

Looks like a really good start. Thanks for getting this together.

Should I write about GDPR rules in this doc?

I don't think GDPR makes sense for this doc, but could be another doc if the team things it's a good idea.

In Third-party Scripts section I thought about recommending Ackee, which is a open-source self-hosted analytics alternative. Should I?

Again, doesn't seem relevant to security. maybe a privacy/GDPR doc.

Is CSRF section relevant even when the solutions are backend only?

It's still possible for ffolks to add client side things to their gatsby sites, so yes, it's good!

Finally, I think there should probably be a section on key security. for things like APIs. If you need a place to start my blog post on security focused on that.

docs/docs/security-in-gatsby.md

moonmeister · 2020-03-20T02:04:08Z

docs/docs/security-in-gatsby.md

+
+In other hand, there could be some fields in your application that you will need to render the inner HTML tags, such as a content field in a blog or a comment in a comments section, that are built in rich-text editors.
+
+That's when you expose your application to XSS attacks, since the only way to render these HTML tags in React is by using the `dangerouslySetInnerHTML` prop:


This isn't entirely true. there are several other packages that do this. html-to-react and html-react-parser are the two I've used. I think these both sanitize on the client side, but not on SSR (but don't quote me on that...). They offer a lot of additional features too but those are not inherently related to security. I'd include this information some how so folks no it's an option...I'll leave it to you exactly how this should be done.

You are right. There are alternatives to dangerouslySetInnerHTML but they don't sanitize HTML. see remarkablemark/html-react-parser#94 and aknuds1/html-to-react#79.

I reformulate the phrase to mention the html-to-react package, what do you think?

I'd at least mention them. I'm fairly sure html-react-parser doesn't do script tags on the client side (I ran into this on a project). one could also use the custom parsing functionality in these to sanitize html

I mentioned html-react-parser! Please check again and see that if it is good.

docs/docs/security-in-gatsby.md

moonmeister · 2020-03-20T02:07:28Z

docs/docs/security-in-gatsby.md

+Configure the created cookie in a way that it could be only sent by the same domain. [Most moderns browsers support it with a backward compatibility](https://caniuse.com/#feat=same-site-cookie-attribute).
+
+### Anti-CSRF Tokens
+


Maybe needs an example. not totally understanding how/why this works.

Yes, totally. I add a more clear example.

I believe this is still outstanding?

moonmeister · 2020-03-20T02:08:14Z

docs/docs/security-in-gatsby.md

+
+## Third-party Scripts
+
+Some third-party scripts like Google Tag Manager gives the possibility to add arbitrary JavaScript code on top of them. Be sure to control the access of these services.


This definitely needs some explanation. How do I control access, to the third-party scripts, or to GTM?

Absolutely. I expanded with 2 docs links to Google

moonmeister · 2020-03-20T02:09:11Z

docs/docs/security-in-gatsby.md

+
+## Check Your Dependencies
+
+In your Gatsby project, you are going to have a lot of dependencies (which has their own dependencies as well) in your `node_modules/`. Therefore, it is important to check if any of them has a security issue. NPM make this possible since v6 by executing the `npm audit` in the command line.


I'd add the yarn equivalent. and may be worth noting the yarn v1 and v2 version if they differ.

yarn v2 does not support audit yet. I changed the writing to talk about yarn as well.

docs/docs/security-in-gatsby.md

moonmeister · 2020-03-20T02:14:46Z

docs/docs/security-in-gatsby.md

+Content Security Policy is a security layer added in web applications to detect and prevent attacks, e.g. the XSS attack mentioned above.
+
+To add it to your Gatsby website, add the [plugin](https://www.gatsbyjs.org/packages/gatsby-plugin-csp/) to your `gatsby-config.js` with the desired configuration. Note that
+currently there is a [incompatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) with [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image) and other plugins.


Expound on "other plugins"...I understand it's unreasonable to list every incompatible plugin, but please define why or what makes a plugin incompatible.

Sure thing! I wrote the reason after that, which is more detailed in the issue.

Co-Authored-By: Alex Moon <[email protected]>

docs/docs/security-in-gatsby.md

moonmeister · 2020-03-23T03:41:49Z

docs/docs/security-in-gatsby.md

+
+## Cross-Site Request Forgery (CSRF)
+
+A web application that use cookies could be attacked by the CSRF exploit, which deceives the browser to execute actions by the user's name without notice. By default, the browser "trusts" all the activity made validating the user's identity and therefore sending the associated cookies in every request.


This needs to be re written it's pretty confusing. https://en.wikipedia.org/wiki/Cross-site_request_forgery has some good explanations you can quote from. If you do choose to fix what you have I think it would still be helpful to link out to a more complete resource like Wikipedia for those interested in diving deeper than the quick overviews we're providing here (this applies to XSS as well).

In these past few days, I'm exploring more in the topic in CS253 - Web Security classes from Stanford. I'll rewrite this section, making it simple, doing some quotes and linking these resources.

moonmeister · 2020-03-23T03:44:32Z

docs/docs/security-in-gatsby.md

+</form>
+```
+
+**How can it be prevented?**


You "copy the site" example above could be fixed by simply scoping your cookies to a certain domain. Make sure you info is accurate (I'm no expert here either) and complete (aka. solve every problem you present, and do so correctly). Again, I think since security is such a deep and nuanced topic it'll be to your benefit to keep these short and simple then link out to more complete resources.

on further thought...Based on how this info is presented Tokens seem to be "THE" solution. I'm guessing they are just one, of many solutions. Present it as such, "On way CSRF attacks can be mitigated..., .... To read more on this topic check out....", then link out to more in depth resources.

Sry I just realized you do have the Same-site cookies example...Fix you headings please The "How Can it be prevented" should probably be a ### header and then each example be #### header. Optionally, Instead of presenting several problems then several solutions, Give one problem, and its solution, then another and its solution...etc.

Ok, sorry about that! I think that is good we are learning things while doing this. I'm gonna rewrite this section.

no need to be sorry. you're doing great work, just trying to give helpful feedback. thanks and keep it up. I've already learned a thing or two.

docs/docs/security-in-gatsby.md

moonmeister · 2020-03-23T04:04:11Z

docs/docs/security-in-gatsby.md

+    }
+```
+
+Note: Whether you need to authenticate someone in your application, Gatsby has an [Authentication Tutorial](/tutorial/authentication-tutorial) which helps doing this job in a secure way.


This covers build variables well but not client side keys. Not sure if the note is intended to cover it cause the language is a bit confusing.

Yes, this note does not cover this part. What do you think it should be here regarding client-side keys? encryption? known methods, e.g. JWT?

I think this doc should be a starting point. so defining the issue and maybe an example of how to solve then (again) links out to more thorough resources (like Gatsby's docs on keys and env variables).

Co-Authored-By: Alex Moon <[email protected]>

laurieontech

Thanks for the work here! Really great start. I left some suggestions surrounding formatting and wording.

docs/docs/security-in-gatsby.md

Co-Authored-By: LB <[email protected]>

laurieontech · 2020-03-26T13:12:57Z

@luizcieslak I know you're incorporating some different feedback here so please let me know when you're ready for another review! Thanks again for the amazing work.

…cs/security-in-gatsby

laurieontech

This is coming along really well! Some small edits and a couple bigger questions. But I'd say we should be able to get this in shortly.

docs/docs/security-in-gatsby.md

laurieontech · 2020-03-27T17:44:53Z

docs/docs/security-in-gatsby.md

+Configure the created cookie in a way that it could be only sent by the same domain. [Most moderns browsers support it with a backward compatibility](https://caniuse.com/#feat=same-site-cookie-attribute).
+
+### Anti-CSRF Tokens
+


I believe this is still outstanding?

docs/docs/security-in-gatsby.md

Co-Authored-By: LB <[email protected]>

…gatsby

laurieontech · 2020-03-30T18:08:04Z

Thank you so much for your work on this! I think we're good to merge this. 🥳

luizcieslak · 2020-03-30T18:24:36Z

I thank you @laurieontech and @moonmeister for the patience and review! I learned a lot 🤗

luizcieslak added 2 commits March 18, 2020 21:26

docs(security-in-gatsby): removing stub

f5434f0

docs(security-in-gatsby): add markdown with topics

e1afad0

luizcieslak added the type: documentation An issue or pull request for improving or updating Gatsby's documentation label Mar 19, 2020

luizcieslak requested review from a team as code owners March 19, 2020 04:31

docs(security-in-gatsby): fix typo

b1e2b7d

moonmeister suggested changes Mar 20, 2020

View reviewed changes

luizcieslak and others added 15 commits March 19, 2020 20:01

docs(security-in-gatsby): fix typo

6f7c5c2

Co-Authored-By: Alex Moon <[email protected]>

docs(security-in-gatsby): more declarative link to gatsby-plugin-csp

a0e707a

Co-Authored-By: Alex Moon <[email protected]>

docs(security-in-gatsby): more declarative link to CSP's can-i-use

06ad16d

Co-Authored-By: Alex Moon <[email protected]>

docs(security-in-gatsby): mention html parsers

a2a85e7

docs(security-in-gatsby): add yarn audit alternative

b271cb6

docs(security-in-gatsby): expand more in others plugins

c26b54c

docs(security-in-gatsby): links for 3 party script

f90037c

docs(security-in-gatsby): add same-site cookies info

fcdabee

docs(security-in-gatsby): add web dev resource

664d376

docs(security-in-gatsby): add key security section

8c838da

docs(security-in-gatsby): using relative internal links

b15df2a

docs(security-in-gatsby): fix csrf token section

9c3abbe

docs(security-in-gatsby): add more other resources

9dade72

docs(security-in-gatsby): fix typo

7339fa4

docs(security-in-gatsby): fix typo

194c7d8

luizcieslak requested a review from moonmeister March 22, 2020 05:32

luizcieslak added 2 commits March 22, 2020 02:37

docs(security-in-gatsby): fix typo

344d2fd

docs(security-in-gatsby): cookies are not send w/ SameSite directive

1e52d47

moonmeister suggested changes Mar 23, 2020

View reviewed changes

luizcieslak and others added 2 commits March 23, 2020 12:46

Update docs/docs/security-in-gatsby.md

88039d3

Co-Authored-By: Alex Moon <[email protected]>

Update docs/docs/security-in-gatsby.md

5c12797

Co-Authored-By: Alex Moon <[email protected]>

luizcieslak and others added 2 commits March 23, 2020 12:49

Update docs/docs/security-in-gatsby.md

deb6aaa

Co-Authored-By: Alex Moon <[email protected]>

Update docs/docs/security-in-gatsby.md

cf87593

Co-Authored-By: Alex Moon <[email protected]>

laurieontech reviewed Mar 23, 2020

View reviewed changes

luizcieslak and others added 6 commits March 26, 2020 09:18

Update docs/docs/security-in-gatsby.md

938df61

Co-Authored-By: LB <[email protected]>

Update docs/docs/security-in-gatsby.md

77cd189

Co-Authored-By: LB <[email protected]>

Update docs/docs/security-in-gatsby.md

7aa4da9

Co-Authored-By: LB <[email protected]>

Update docs/docs/security-in-gatsby.md

d7fe95a

Co-Authored-By: LB <[email protected]>

Update docs/docs/security-in-gatsby.md

090097b

Co-Authored-By: LB <[email protected]>

Apply suggestions from code review

406837e

Co-Authored-By: LB <[email protected]>

luizcieslak added 2 commits March 27, 2020 12:15

Apply suggestions from code review

3b81651

Update docs/docs/security-in-gatsby.md

1640a70

luizcieslak requested review from moonmeister and laurieontech March 27, 2020 15:18

luizcieslak added 2 commits March 27, 2020 12:19

fix typo

52e4265

Merge remote-tracking branch 'origin/docs/security-in-gatsby' into do…

aad2dcb

…cs/security-in-gatsby

laurieontech reviewed Mar 27, 2020

View reviewed changes

luizcieslak and others added 3 commits March 27, 2020 16:26

Apply suggestions from code review

65a3a41

Co-Authored-By: LB <[email protected]>

Apply suggestions from code review

84238b6

Co-Authored-By: LB <[email protected]>

Apply suggestions from code review

d37dc36

luizcieslak requested a review from laurieontech March 30, 2020 13:19

luizcieslak and others added 3 commits March 30, 2020 12:25

add text type in cookies code snipper

d315812

Minor grammer, remove quote indication

95acf5c

Merge remote-tracking branch 'upstream/master' into docs/security-in-…

820047c

…gatsby

laurieontech merged commit 33efe98 into gatsbyjs:master Mar 30, 2020

This was referenced Apr 13, 2020

fix(docs): security in Gatsby - fix code block language #23074

Merged

fix(docs): security in Gatsby - fix brand names #23075

Merged

fix(docs): security in Gatsby - remove domain from internal links #23100

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs/security in gatsby #22395

Docs/security in gatsby #22395

luizcieslak commented Mar 19, 2020

moonmeister left a comment

moonmeister Mar 20, 2020

luizcieslak Mar 20, 2020

moonmeister Mar 21, 2020

luizcieslak Mar 22, 2020

moonmeister Mar 20, 2020

luizcieslak Mar 22, 2020 •

edited

Loading

laurieontech Mar 27, 2020

moonmeister Mar 20, 2020

luizcieslak Mar 22, 2020

moonmeister Mar 20, 2020

luizcieslak Mar 20, 2020

moonmeister Mar 20, 2020

luizcieslak Mar 20, 2020

moonmeister Mar 23, 2020

luizcieslak Mar 26, 2020

moonmeister Mar 23, 2020

moonmeister Mar 23, 2020

moonmeister Mar 23, 2020

luizcieslak Mar 26, 2020

moonmeister Mar 26, 2020

luizcieslak Mar 26, 2020

moonmeister Mar 23, 2020

luizcieslak Mar 26, 2020

moonmeister Mar 26, 2020

laurieontech left a comment

laurieontech commented Mar 26, 2020

laurieontech left a comment

laurieontech Mar 27, 2020

laurieontech commented Mar 30, 2020

luizcieslak commented Mar 30, 2020


		In other hand, there could be some fields in your application that you will need to render the inner HTML tags, such as a content field in a blog or a comment in a comments section, that are built in rich-text editors.

		That's when you expose your application to XSS attacks, since the only way to render these HTML tags in React is by using the `dangerouslySetInnerHTML` prop:

		Configure the created cookie in a way that it could be only sent by the same domain. [Most moderns browsers support it with a backward compatibility](https://caniuse.com/#feat=same-site-cookie-attribute).

		### Anti-CSRF Tokens


		## Third-party Scripts

		Some third-party scripts like Google Tag Manager gives the possibility to add arbitrary JavaScript code on top of them. Be sure to control the access of these services.


		## Check Your Dependencies

		In your Gatsby project, you are going to have a lot of dependencies (which has their own dependencies as well) in your `node_modules/`. Therefore, it is important to check if any of them has a security issue. NPM make this possible since v6 by executing the `npm audit` in the command line.


		## Cross-Site Request Forgery (CSRF)

		A web application that use cookies could be attacked by the CSRF exploit, which deceives the browser to execute actions by the user's name without notice. By default, the browser "trusts" all the activity made validating the user's identity and therefore sending the associated cookies in every request.

Docs/security in gatsby #22395

Docs/security in gatsby #22395

Conversation

luizcieslak commented Mar 19, 2020

Description

Documentation

Related Issues

moonmeister left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luizcieslak Mar 22, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

laurieontech left a comment

Choose a reason for hiding this comment

laurieontech commented Mar 26, 2020

laurieontech left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

laurieontech commented Mar 30, 2020

luizcieslak commented Mar 30, 2020

luizcieslak Mar 22, 2020 •

edited

Loading