Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Apr 14, 2020
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 27 additions & 22 deletions docs/docs/security-in-gatsby.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Cross-Site Scripting is a type of attack that injects a script or an unexpected

JSX elements automatically escape HTML tags by design. See the following example:

```js
```jsx
// highlight-next-line
const username = `<script src='https://path/to/badness.js'></script>`

Expand All @@ -23,7 +23,7 @@ On the other hand, fields in your application may need to render inner HTML tags

In order to render those HTML tags you need to use an HTML parser (e.g. [html-react-parser](https://github.com/remarkablemark/html-react-parser)) or the `dangerouslySetInnerHTML` prop, like so:

```js
```jsx
const CommentRenderer = comment => (
// highlight-next-line
<p dangerouslySetInnerHTML={{ __html: comment }} />
Expand Down Expand Up @@ -51,15 +51,20 @@ For example, assume that the comments in your blog are sent in a form similar to

A malicious website could inspect your site and copy this snippet to theirs. If the user is logged in, the associated cookies are sent with the form and the server cannot distinguish the origin of it. Even worse, the form could be sent when the page loads with information you don't control:

```js
```html
// highlight-next-line
<body onload="document.csrf.submit()">
<!-- ... -->
<form action="http://mywebsite.com/blog/addcomment" method="POST" name="csrf">
// highlight-next-line
<input type="hidden" name="comment" value="Hey visit http://maliciouswebsite.com, it's pretty nice" />
<input type="submit" />
</form>
<!-- ... -->
<form action="http://mywebsite.com/blog/addcomment" method="POST" name="csrf">
// highlight-next-line
<input
type="hidden"
name="comment"
value="Hey visit http://maliciouswebsite.com, it's pretty nice"
/>
<input type="submit" />
</form>
</body>
```

### How can you prevent cross-site request forgery?
Expand All @@ -76,7 +81,7 @@ Actions that do not simply read data should be handled in a POST request. In the

If you want to protect a page your server will provide an encrypted, hard to guess **token**. That token is tied to a user's session and must be included in every POST request. See the following example:

```js
```html
<form action="http://mywebsite.com/blog/addcoment" method="POST">
<input type="text" name="comment" />
// highlight-next-line
Expand Down Expand Up @@ -121,18 +126,18 @@ Similar to npm, you can use the `yarn audit` command. It is available starting w
Gatsby allows you to [fetch data from various APIs](/docs/content-and-data/) and those APIs often require a key to access them. These keys should be stored in your build environment using [Environment Variables](/docs/environment-variables/). See the following example for fetching data from GitHub with an Authorization Header:

```js
{
resolve: "gatsby-source-graphql",
options: {
typeName: "GitHub",
fieldName: "github",
url: "https://api.github.com/graphql",
headers: {
// highlight-next-line
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
},
}
}
{
resolve: "gatsby-source-graphql",
options: {
typeName: "GitHub",
fieldName: "github",
url: "https://api.github.com/graphql",
headers: {
// highlight-next-line
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
},
}
}
```

### Storing keys in client-side
Expand Down