DEV Community: Matt Ferderer

Submit a Static Website Form with Cloudflare Workers

Matt Ferderer — Fri, 11 Nov 2022 23:01:16 +0000

I had a recent small project for a family member's business I took on that I did with a static website. The website needed a contact form though. Since I was already hosting the website on Cloudflare's Pages product for static websites, I thought I would try their serverless workers out for the contact form. Cloudflare's Worker documentation is a work in progress & needs some love. I submitted a few PRs. It seemed that they were possibly doing a massive overhaul as well. To help anyone interested I'm adding this blog article. Hopefully, you get some use out of it.

Free Everything

What's awesome about the tools I ended up selecting for this project is that they all offer free developer plans for personal projects. If you're running a business, you'll have to look at each one in particular. But everything in this project is easy to swap in & out.

Here's the scope of what we're building:

Static Website Hosting on Cloudflare Pages
API to handle form submissions on Cloudflare Workers
Logging with Sentry
Transactional E-mails with SendGrid
Captcha with Google

Project Overview

You can pull the project from GitHub & run npm install.

Build a Static Website with a Form

A sample.tsx file is in the root that shows how to use this project with a React front end. It should be simple to translate that to JS without a framework or your framework of choice. You will need to set up a free account on each provider unless you don't want to use that piece. This is the part of your website you would place on something like Cloudflare Pages.

Here are some of the critical parts. For Google's Captcha, we need to add this to the header of your page. You will need to enter your unique captcha key from Google in {GOOGLE_CAPTCHA_KEY}.

<script async src={`https://www.google.com/recaptcha/api.js?render=${GOOGLE_CAPTCHA_KEY}`}></script>

For the form submit, we can attach an onSubmit event listener like the following.

const handleSubmit = (e: SyntheticEvent<HTMLElement>) => {
        e.preventDefault()
        window.grecaptcha.ready(async function () {
            const token = await window.grecaptcha.execute(GOOGLE_CAPTCHA_KEY, { action: 'submit' });
            const body = {
                from: {
                    name: name,
                    email: email,
                },
                message: message,
                token: token
            };
            try {
                const request = await fetch(CLOUDFLARE_WORKER_URL, {
                    method: "POST",
                    body: JSON.stringify(body),
                    headers: {
                        "Content-Type": "application/json"
                    }
                })
                if (request.status === 202) {
                    setShowAlert(true)
                    setSuccess(true)
                    setError(false)
                    setErrorMessage('')
                } else {
                    const text = await request.text();
                    setShowAlert(true)
                    setSuccess(false)
                    setError(true)
                    setErrorMessage(text)
                }
            } catch (error) {
                setShowAlert(true)
                setSuccess(false)
                setError(true)
                setErrorMessage(sendEmailFailedMsg)
            }
        })
    }

Using onSubmit, this handler can catch the button with type="submit" events & when a user presses the enter key in a form. The first step is to prevent the default action value of the form. Then use Google's grecaptcha to get a token to pass along with our request in an attempt to verify that a person submitted the form. After that, the method formats the body of the request to send to our Cloudflare Worker & then sends it as a POST request. Some of the variables being passed are set outside of this method, so checkout the sample.tsx for more info. This method is also using a modal to show an error or success message based on the response from the Cloudflare Worker.

Cloudflare Worker Code

The src directory has the most important parts. Starting with the index.tsx file.

import { initSentry } from "./logger";
import { handleRequest } from './handler'

addEventListener("fetch", (event) => {
  const sentry = initSentry(event);
  event.respondWith(handleRequest(event.request, sentry));
});

This is the event listener that Cloudflare Workers will run when it receives a HTTP request. The Sentry logging tool gets initialized here & gets passed in to the custom handleRequest method. The handleRequest method will generate the response once we're done.

The .handle.tsx file has the bulk of our logic, including the handleRequest method.

export async function handleRequest(request: Request, sentry: Toucan): Promise<Response> {
  try {
    if (isOptionsRequest(request)) return handleOptionsRequest(request);

    const {isValid, msg, contactRequest} = await validateRequest(request, sentry);
    if (!isValid) {
      sentry.captureMessage(`Invalid Request: ${msg}`);
      return invalidRequestResponse(msg);
    } 

    const emailRequest = await sendEmail(contactRequest);
    if (emailRequest.status !== 202) {
      const msg = await emailRequest.text();
      sentry.captureMessage(`Sendgrid request failed.
      Request: ${JSON.stringify(contactRequest)}
      Response: ${emailRequest.status} ${msg}`);

      return invalidRequestResponse(sendEmailFailedMsg);
    }

    return acceptedResponse();

  } catch (error) {
    sentry.captureException(error);
    return invalidRequestResponse();
  }
}

The first step is to check if we're receiving an Options HTTP request. If that's the case, we respond with what types of HTTP requests we're accepting & end the task.

Then we check if this is a valid request. This lives in the validate.ts. It contains a bunch of simple checks looking to make sure it's a POST request & the necessary fields exist to complete this task. The Google Captcha validation lives in here as well. Let's look closer at that.

export const validateCaptcha = async (request: ContactRequest, sentry: Toucan): Promise<StatusMsg> => { 
    if (!request.token) {
        sentry.captureMessage('Missing captcha token. Request:' + JSON.stringify(request));
        return Promise.resolve({ status: false, msg: sendEmailFailedMsg });
    }

    const captchaUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${RECAPTCHA_SECRET}&response=${request.token}`;
    const result = await fetch(captchaUrl);
    const json = await result.json() as CaptchaResponse;

    if (!json.success) {
        sentry.captureMessage('Invalid captcha response.' + getCaptchaResponseAndOriginalRequest(json, request));
        return Promise.resolve({ status: false, msg: sendEmailFailedMsg });
    }

    if (captchaScoreIsNotValid(json.score)) {
        sentry.captureMessage('Low Captcha Score. ' + getCaptchaResponseAndOriginalRequest(json, request));
        return Promise.resolve({ status: false, msg: sendEmailFailedMsg });
    }

    return { status: true, msg: '' };
}

The captcha method makes sure there is a token passed by Google into the request. If not, it's logged via the Sentry logger & a response is sent back to the client. If the token exists, it gets verified by Google. Google then sends back a score from 0.0 to 1.0. In captchaScoreIsNotValid I've set it to make sure the score is equal to or above 0.5. If everything looks good in the captcha, we move on to sending an e-mail in the sendEmail.ts file.

export const sendEmail = (contactRequest: ContactRequest): Promise<Response> => {
    const emailRequest =
        new Request('https://api.sendgrid.com/v3/mail/send', {
            method: 'POST',
            body: formatSendGridRequest(contactRequest),
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${SENDGRID_API_KEY}`
            }
        });

    return fetch(emailRequest);
}

This is a simple request to SendGrid. Using a tool like SendGrid or MailChimp allows an easy way to send & track e-mail success rates. SendGrid will send us a success or a failure message with an error. If the message is a success our handleRequest method is done & can reply with a success message. If an error occurs, it gets logged via Sentry.

Sentry is a very nice logging tool. If you pay for it, you can get integrations with Asana, GitHub, or a ton of other issue trackers. Sentry also has nice issue tracking.

GitHub Workflow

A workflow file exists .github\workflows\node.js.yml to build, run tests & deploy to Cloudflare. This makes deployments easy. For each place, you see a ${{ secrets.CF_VARIABLE_NAME }} you will need to add a corresponding 'Action Secret' in your GitHub repository. To do that, go to Settings and click Secrets (under Security), and then Actions. GitHub will replace your variables in the node.js.yml file with the values you set here.

It should be noted, I do have two variables that are not 'secrets' stored in the node.js.yml file.

RECIPIENT_NAME
RECIPIENT_EMAIL

These two you can set a user secret for or you can just hard code into the config file. I like to hard code these because it allows me to easily look up the value & modify it. I also don't mind if someone else finds these values.

Cloudflare Worker

When you create the Cloudflare Worker, you will need to go to settings and add the same variables that are in the GitHub Workflow.

ACCESS_CONTROL_ALLOW_ORIGIN
MAIL_SUBJECT
RECAPTCHA_SECRET
RECIPIENT_EMAIL
RECIPIENT_NAME
SENDGRID_API_KEY
SENTRY_DSN

You will also need to generate an API token to use in your GitHub workflow to use with the CF_API_TOKEN secret. You can generate a token by clicking on the 'My Profile' link once you're logged in on the upper right corner. Then go to API Tokens & generate a token with access to the following: Workers Tail:Read, Workers KV Storage:Edit, Workers Scripts:Edit.

Feedback

I wrote this tutorial rather swiftly & months after implementing the actual code. Please let me know if you found it valuable or if you have questions or found something I could improve on. I wouldn't mind spending more time building small apps with tutorials but I want to make sure people are finding value first.

Originally posted on mattferderer.com.

How to Use Tailwind with Blazor

Matt Ferderer — Tue, 01 Dec 2020 21:51:54 +0000

Here are my preferred ways you can add Tailwind to your Blazor app.

CDN
- Pros: Quick & easy
- Cons: Large file size, no customization or advanced features
PostCSS
- Pros: Lots of customization and features
- Cons: Requires NPM, more complicated

Adding Tailwind with a CDN

The easiest way is to drop a link to the CDN build in the header of your wwwroot/index.html file.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

If you run into an error with the CSS not displaying due to "Resource interpreted as Stylesheet but transferred with MIME type text/plain" use a different CDN or a specific CSS version on unpkg.

<link href="https://unpkg.com/tailwindcss@2.0.1/dist/tailwind.min.css" rel="stylesheet" />

Adding Tailwind with PostCSS

If you can use Node Package Manager as part of your build processes, add a Package.json file to your project at the root level with npm init in the terminal.

Add Tailwind and dependencies.

npm install tailwindcss postcss autoprefixer postcss-cli

Add a postcss.config.js file to the root level of your project with the following.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

To customize the colors or other settings add a tailwind.config.js file to the root with the terminal command npx tailwindcss init.

This creates an object that overrides the default config object. The default config object is a great reference for how to override. In this case, we'll add a color to our config named brandBlue.

First, require the colors object from tailwind at the top of your config. Copy and paste the default colors from the default config. The brandBlue color can now be added.

//tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      brandBlue: '#2b59c0',
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Side note, instead of using the Tailwind's color object, I recommend creating your own but using CSS variables. That makes it easier if you need to use a specific color in both Tailwind & custom CSS classes.

In your main css file drop these three lines in at the top.

@tailwind base;
@tailwind components;
@tailwind utilities;

If you have any @import statements in your CSS, make sure they come first or PostCSS will get angry.

In package.json add a property to the scripts object.

"scripts": {
  "buildcss": "postcss wwwroot/css/app.css -o wwwroot/css/app.min.css"
},

The first path is your source CSS and the second is where you want to output it. If you're using the Blazor template that comes with .NET, you will need to tweak the index.html file to use app.min.css instead of app.css. Feel free to change these CSS file names as you see fit.

Now you can run npm run buildcss in the terminal to generate your CSS.

Once done, you can search app.min.css for "brand". The CSS file should now have Tailwind CSS classes in it, including the brand color in multiple locations.

The file size has grown a bit now. It's still smaller than most images but to be good people, we can remove unused CSS.

In the tailwind.config.js file, update the purge property to include your Razor and HTML files. I'm also setting enabled to true. Without this set, NODE_ENV must be set to production for CSS to be removed.

//tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  purge: {
      enabled: true,
      content: [
          './**/*.html',
          '.**/*.razor'
      ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      brandBlue: '#2b59c0',
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now Tailwind will use PurgeCSS to remove any Tailwind classes that do not exist in a Razor or HTML page in the project.

Feedback Appreciated

I would love to hear in the comments your thoughts on using NPM with .NET. I'm trying to understand better where most .NET devs frontend stacks are.

Originally posted on mattferderer.com.

Scrape a Website & Send an E-mail with Azure Functions

Matt Ferderer — Wed, 27 Jun 2018 20:12:23 +0000

Serverless Functions are an awesome way to create small tasks that can run on a schedule, by the click of a button or using your voice. We'll create a function that visits a website, collects important data & sends that via an e-mail back to us on a schedule.

This project will use Azure Functions. They are dirt cheap, especially for this project. Like most serverless architectures, you only pay for the server time it takes your function to run.

If you don't have an Azure account, a quick search for "Free Azure Account" should take you to Microsoft's latest offering.

Create an Azure Function

On the next screen give the app a name, select a resource group, etc. If you're new to this, drop me a line in the comments & I can walk you through these steps. Once done, click Create.

Once Azure has the new resources ready, you can either click the pop up that appears or go to All Resources and find the Function App there. The Function App has a lightning bolt icon.

On the next screen, hover over Functions on the left menu. Click the + sign that appears to create our Function.

Select Timer if you want to do this on a schedule or Webhook+API if you want a URL to send a request to so you can do it on demand. Also make sure C# is selected as the language below.

On the right side, click View Files.

Add a new project.json file and add the following text. Then click the Save button:

{
  "frameworks": {
    "net46":{
      "dependencies": {
        "HtmlAgilityPack": "1.8.2"
      }
    }
  }
}

Note: Currently only .NET Framework 4.6 is supported on Azure Functions. .Net Core is available in preview. If at any later time you wish to use .Net Core instead, adjust the framework snippet above. The following code should require minimum changes if any.

For this demo & purposes of legality, we'll scrape my blog's homepage. Here's the code I wrote. If you're looking to make multiple asynchronous requests, the comment in the GetLatestArticles function explains how.

#r "SendGrid"
using System.Net;
using HtmlAgilityPack;
using SendGrid.Helpers.Mail;

// This is our main method that's called when the function runs. Azure passes the TimerInfo object and a TraceWriter object to output logs. We use C#'s out parameter modifier to work with Azure's Sendgrid e-mail integration using the Mail class.
public static void Run(TimerInfo myTimer, TraceWriter log, out Mail message)
{
    try{
        var latestArticle = GetLatestArticles().Result;
        log.Info(latestArticle);
        message = SendEmail(latestArticle);
    } catch (Exception e) {
        log.Info(e.ToString());
        message = SendEmail(e.ToString());
    }

}

public static async Task<string> GetLatestArticles() {
    var mattsLatestArticle = await GetMattsLatestArticle();
    /**
     * If you want to scrape additional resources with async, 
     * add more functions like above.
     *
     * Then return them like this:
     * return mattsLatestArticle + otherLatestArticle;
     */
    return mattsLatestArticle;
}

public static async Task<string> GetMattsLatestArticle() {
    string website = "https://mattferderer.com";

    HttpClient client = new HttpClient();
    string html = await client.GetStringAsync(website);

    HtmlDocument doc = new HtmlDocument();
    doc.LoadHtml(html); 

    var article = doc.DocumentNode
        .SelectNodes("//a")
        .FirstOrDefault(x => x.Attributes.Contains("class") && x.Attributes["class"].Value.Contains("article-link"));

    var url = article
        .Attributes
        .FirstOrDefault(x => x.Name == "href")
        .Value;

    var title = article
        .SelectSingleNode("//h2")
        .InnerHtml;

    return $"<p><a href=\"{website}{url}\">{title}</a></p>";
}

public static Mail SendEmail(string input) {
        var message = new Mail
    {
        Subject = "Latest Article"
    };

    var personalization = new Personalization();
    personalization.AddTo(new Email("yourEmail@example.com"));

    var content = new Content
    {
        Type = "text/html",
        Value = input
    };
    message.AddContent(content);
    message.AddPersonalization(personalization);
    return message;
}

Add SendGrid Integration

Before this will send an e-mail it needs an e-mail service integrated with the Azure account. I recommend SendGrid.

SendGrid is easy to integrate with Azure & a has a free developer plan. They're also a great provider in general. For these reasons, they're my go to for fun apps & production apps.

Create a SendGrid account and then go to settings > API Keys. Click create an API Key. Give it a name. Restricted access with Mail Send is all we need for permissions. Copy your API key somewhere safe.

Back in Azure, open the Functions Application Settings by clicking the app's name on the left menu. Then click Application Settings near the bottom under Configured features. (See highlighted links below)

Scroll down to the Application Settings, above Connection strings and click Add new setting.

Add the key SendGridKey. For the value, add the API key Sendgrid gave you. Click save.

Under the functions name on the left, click Integrate & add a new Output.

Select SendGrid from the list of Output options.

In the SendGrid API Key drop down menu on the next screen, select SendGridKey.

Fill out the From address & subject as well if you want defaults for the function. Make sure to Save.

The output settings will now be added to the function.json file that Azure created for you if you did a Timer Trigger app. You can also find the schedule using a Cron pattern in there.

At this point, you should be able to run the Azure Function & have it send you an e-mail. If not, let me know in the comments.

Additional Notes

If you're sending links in the e-mail, as done in the above example, you may find it useful to turn off SendGrid's "Tracking Settings" feature. This feature changes your links & sometimes breaks them if you don't have this setup right. You can disable it on Sendgrid's Admin screen by going to Settings > Tracking.

You can debug your code locally using VS Code or Visual Studio.

Hosting Blazor on Netlify

Matt Ferderer — Thu, 21 Jun 2018 20:12:23 +0000

Since Blazor is a frontend framework, we can host our Blazor apps on any serverless or static web host. The only requirement is that we need to add minor configuration to redirect URLs so that all URLs point to our index.html page. Netlify fits this perfect. Netlify also happens to be my favorite host for static websites.

Prerequisites

.NET Core 2.1 or later
Blazor templates should be installed. dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Create a Demo Blazor App

Create a new Blazor app with the command: dotnet new blazor -o staticDemo

Make sure your app works by running dotnet run

Netlify Specific Steps

Add a file named _redirects in your wwwroot directory.

Add the following line to your _redirects file:

/*    /index.html   200

This redirects any URL to the index.html file. Since Blazor is a SPA tool, if someone enters a URL such as oursite.com/counter we don't want the server to look for a counter file. Instead the server should direct the request to index.html which will take care of the routing.

If you publish on another static host or a serverless environment, check their docs for how to write a similar redirect.

Publishing to Netlify

Once we're done with that, the easiest way to deploy to Netlify is to add this to a GitHub repo.

Netlify can't build this project for us since they can't build dotnet. We'll need to handle building & adding the files to our repository.

By default the .gitignore file created with our project ignores the default build directory. You can modify your .gitignore file to not ignore the default release directory. Then you can run dotnet publish -c release.

Another option is to publish to a different directory using the -o parameter. Here's an example: dotnet publish -c release -o ./dist

Once you've done either of the above, push your changes to a GitHub repository.

After that you can go to Netlify & create a new site from your GitHub repository. After linking your site to your repo, you're prompted with deploy settings. You can ignore the build command. For the publish directory, add the directory you published to. It should look like this:

_framework
css
sample-data
_redirects
index.html

Every time you push changes to your repository, Netlify will re-deploy them.

If you run into issues or you deploy this elsewhere, let me know in the comments below.

Originally posted on mattferderer.com.

Add Coding Symbols to VSCode

Matt Ferderer — Sun, 17 Jun 2018 20:12:23 +0000

As developers we spend more time reading code, that writing. One of the most common tasks we do are compare items. Using symbols can make your code easier & more enjoyable to read.

Here's an example of how adding coding symbols, also known as font ligatures look.

To add this to your VS Code, do the following:

Install the Fira Code font on your computer.

Edit your user settings in VS Code to use Font Ligatures and the 'Fira Code' font.

"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace, 'Segoe UI Emoji'",
"editor.fontLigatures": true,

That's it! You're done! Enjoy an improved coding experience!

What is CSP? Why & How to Add it to Your Website.

Matt Ferderer — Sun, 13 May 2018 03:59:47 +0000

Cross-Site Scripting (XSS) sucks! XSS is when someone sneaks JavaScript or CSS into your site through a comment, a form, an advertisement or a NPM package that's part of your JavaScript build. Now they own every user's account that is visiting your website. XSS is such a common attack, OWASP claims it happens in 2 out of every 3 websites & apps.

You can eliminate most XSS attacks with a CSP (Content Security Policy). A CSP lets you list external and internal scripts, styles, images and other content sources to allow. It's even compatible with all the major browsers.

Since CSP can block one of the most common attacks known you think everyone would be using it, right? Nope! Less than 2.5% of the top million visited sites use it.

For most websites security is an afterthought, until someone steals all their data. Then the public rages on social media. The typical company response is to fire someone & promise to put security first, all while crossing their fingers behind their back.

Let's take a look at how we can avoid such a mess.

How to Add a CSP Policy

The first step is to add a header to your server configuration. It's recommended to start with the strictest CSP rule possible but set it to "report only" mode. This creates a report on what would happen if we blocked everything possible. Once you have your report you can start picking which items you want to allow (aka whitelist), which items to create alternate fixes for and which items to block.

Here's a recommended header to start with:

Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none';

Your CSP should appear along with your other headers when viewing your page in the browser's developer tools.

If we didn't set it to report mode, you would see "The full power of CSP!" In other words, the CSP would block most of your website.

Remember, the role of a Content Security Policy (CSP) is to block everything you haven't allowed.

If you open up the console in your browser developer tools (F12) you typically will see a lot of errors. The first error might complain about lacking a report-uri but we'll get to that later. The rest of the errors should all start with [Report Only]. This is the CSP report mode letting you know what content would be blocked & how to allow it.

A CSS stylesheet is often one of the first errors that will appear. It will look something like this:

[Report Only] Refused to load the stylesheet 'https://example.com/style.css' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

To fix this, we adjust our policy by adding a style-src directive that allows 'self'. Adding 'self' allows us to include any CSS stylesheet hosted on the same URL & port number as our page. Without doing this, style-src defaults to the default-src directive which we have set to none.

Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none'; style-src 'self';

Odds are high that you will also want to add 'self' to images and scripts. This would result in adjusting our CSP again.

Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none'; style-src 'self'; script-src 'self'; img-src 'self';

A typical website needs to require external scripts as well. We can allow JavaScript from the domain cdnjs.com by modifying our script-src directive.

Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none'; style-src 'self'; script-src 'self' cdnjs.com; img-src 'self';

One thought you might have looking at our current rule is why did we explicitly declare directives for form-action & frame-ancestors? They are special cases that do not use the default-src fallback.

You can find the entire list of directives on MDN.

Inline Script is My Middle Name

Inline JavaScript and CSS are often used on websites but they are also dangerous. They're the easiest way for a hacker to create an XSS attack. Therefore, to allow them you must add 'unsafe-inline' to the directive you want to allow them for. This is to make sure you understand what you're doing isn't recommended.

A common CSS pattern is to inline your most important CSS that renders your 'above fold content' with <style> tags. This can help decrease the perceived rendering time. With HTTP/2 I often argue against doing this as it tends to be slower. If you do choose to use inline scripts, you have three options.

Get a SHA-256 hash of the script & add it to our CSP. Chrome's dev tools will even generate a SHA-256 for you in the console when it displays the CSP error. Adding it to our current CSP example would look like this:

Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none'; style-src 'self'; script-src 'self' cdnjs.com sha256-c2u0cNUv1GcIb92+ybgJ4yMPatX/k+xxHHbugKVGUU8=; img-src 'self';

Generate a unique nonce by your server for each inline script. This means each server request has to generate a new nonce. You would add it to your CSP the same way as a SHA-256, nonce-47c2gtf3a1. You also need to add it to the script tag: <script nonce="47c2gtf3a1">. It's rare to see nonces used as they are rather inconvenient to implement.
Allow inline scripts by adding 'unsafe-inline' to your policy & hang your head in shame. This allows inline scripts, which weakens your CSP & allows XSS attacks. Doing this should cause you to feel some sadness.

Cheer Up! Unsafe Inline Isn't the End of the World! Just Your Company. (Just kidding, sort of...)

When first implementing your CSP, there is a good chance you will need to use unsafe-inline on either your style-src or script-src directives. You might even need to allow JavaScript's eval function with unsafe-eval. Gasp!

Just remember, a CSP should be one of many weapons in your security arsenal. It should not be your only weapon.

Having a CSP with a few unsafe rules is still better than not having a CSP at all. Not implementing a CSP at all would be the same as setting every directive to allow all of the unsafe CSP rules.

For example, a common way to steal logins using CSS is by sending a request for a background image or font to an evil URL such as http://evilexamplesite.com?password=a where a is the letter you typed into the password login field. When you would type the next letter of your password, the evil CSS script would send another request but with that letter instead of a. The evil site then logs these requests to determine your username & password. By allowing unsafe-inline for our style-src, someone could inject this evil code. Fortunately, their code wouldn't work since our CSP doesn't allow img-src & font-src from the evil example site.

You are also not in bad company by doing this. A lot of sites, including GitHub & security professional Troy Hunt's blog use unsafe-inline. Facebook uses unsafe-eval & even requires it for some of their SDKs. Anyone using Google Tag Manager for analytics will also have to reduce their CSP security. I must confess as well. I use GatsbyJS for my personal blog & there are issues that need to be fixed before I can remove unsafe-inline.

If you still feel defeated for having to succumb to implementing an unsafe rule on a directive, you can try applying a different CSP header to each page on your website. If you have areas that allow or display input from a user or outside source, you could try adding a stricter CSP on those pages.

Generating the Rest of Your CSP

The old-fashioned way of doing this is to go to each page on your site, check for these errors & fix them. If you have the free time to do it this way, great! You might even enjoy this nice Chrome extension or the Fiddler extension. They let you browse your website & will generate a proper CSP for you.

When I first learned about CSP over a year ago, this task seemed to daunting for me to complete. It was then that I learned about the report-uri feature of CSP. You can add a report-uri to the end of your CSP with an URL to send reports to. The browser will send any CSP violation to the URL you specify. Now your visitors can do all that work for you just by using your website.

Here is an example of an error the browser would send:

{
    "csp-report": {
        "document-uri": "https://mattferderer.com/",
        "referrer": "",
        "violated-directive": "script-src",
        "effective-directive": "script-src",
        "original-policy": "default-src 'none'; form-action 'none'; frame-ancestors 'none'; report-uri https://mattferderer.report-uri.com/r/d/csp/wizard",
        "disposition": "report",
        "blocked-uri": "inline",
        "line-number": 4,
        "source-file": "https://mattferderer.com/",
        "status-code": 0,
        "script-sample": ""
    }
}

The report lets you know what happened & where.

If you already have an error logging service, you could use that. If you're looking for a free & easy method to get started though, I recommend Report URI.

The fine folks at Tala Security, who run a similar service, pointed out to me a while back that a CSP is not a set it & forget it tool. As you update your site or the services you rely on get updated, your CSP may need to adjust. This makes the reporting service even more valuable.

Having a reporting service will also show you real-world data from your users who are running different browsers, browser extensions, etc.

I recommend running your CSP in report only mode & sending your reports to a service until you are confident you aren't blocking any valuable content from your users. Once done, you can change your CSP from Content-Security-Policy-Report-Only to Content-Security-Policy. This will start enforcing your CSP. You can still keep the report-uri as part of your CSP to continue collecting errors.

Quick Start Guide

Here's a quick recap on how to get started, with additional instructions using Report URI.

Add a strict CSP Header to your site. I suggest Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none';
Sign up for a free account at Report URI. Make sure to verify your email. The service won't work until you do that.
Using Report URI, go to Setup & create a CSP reporting address. Add that reporting address to your CSP: Content-Security-Policy-Report-Only: default-src 'none'; form-action 'none'; frame-ancestors 'none'; report-uri https://yoursite.report-uri.com/r/d/csp/reportOnly
Using Report URI, go to CSP > My Policies. Add a new policy.
Using Report URI, go to CSP > Wizard. Watch as your data rolls in.* You can allow or block a site for each directive here. This will generate your policy for you. You can view it by going back to "My Policies".
Update your CSP with the new policy generated by Report URI.
Once you've run your CSP in report only mode & are satisfied with the lack of new entries showing up in Report URI, adjust your CSP from Content-Security-Policy-Report-Only to Content-Security-Policy to begin enforcing your CSP.

*Depending on your reporting service, inline scripts that break the CSP policy may not show up.

Additional Notes

Twitter has a great package for Ruby on Rails developers to set secure default headers. They also list similar libraries for other popular frameworks.

GitHub's CSP Journey is a great article on the issues they faced while implementing their CSP.

This CSP Quick Reference Guide & Scott Helme's CSP Cheat Sheet are excellent resources to glance at when implementing a CSP.

If you are in the need of extra precautions for specific pages, check out Sandbox mode.

Originally posted on mattferderer.com.