1. Answers
  2. Preventing XSS Attacks with AWS CloudFront and WAF Regional

How do I prevent cross-site scripting (XSS) on CloudFront distributions using WAF Regional?

In this guide, we will create an AWS CloudFront distribution and protect it from cross-site scripting (XSS) attacks using AWS WAF Regional. We will define an XSS match set in AWS WAF, create a WAF Web ACL, and associate it with our CloudFront distribution.

Key Points

  • Define an XSS match set to identify potential XSS attacks.
  • Create a Web ACL to apply rules to the CloudFront distribution.
  • Associate the Web ACL with the CloudFront distribution to enforce protection.
import * as aws from "@pulumi/aws";
import * as pulumi from "@pulumi/pulumi";

// Define an XSS Match Set
const xssMatchSet = new aws.wafregional.XssMatchSet("xssMatchSet", {
    name: "example-xss-match-set",
    xssMatchTuples: [{
        fieldToMatch: {
            type: "QUERY_STRING",
        },
        textTransformation: "NONE",
    }],
});

// Create a Web ACL with the XSS Match Set
const webAcl = new aws.wafregional.WebAcl("webAcl", {
    name: "example-web-acl",
    metricName: "exampleWebAcl",
    defaultAction: {
        type: "ALLOW",
    },
    rules: [{
        action: {
            type: "BLOCK",
        },
        priority: 1,
        ruleId: xssMatchSet.id,
        type: "REGULAR",
    }],
});

// Create an S3 bucket to serve as the CloudFront origin
const bucket = new aws.s3.Bucket("bucket", {
    website: {
        indexDocument: "index.html",
    },
});

// Create a CloudFront Distribution
const distribution = new aws.cloudfront.Distribution("distribution", {
    origins: [{
        domainName: bucket.websiteEndpoint,
        originId: bucket.arn,
        s3OriginConfig: {
            originAccessIdentity: "origin-access-identity/cloudfront/EXAMPLE",
        },
    }],
    enabled: true,
    defaultRootObject: "index.html",
    defaultCacheBehavior: {
        targetOriginId: bucket.arn,
        viewerProtocolPolicy: "redirect-to-https",
        allowedMethods: ["GET", "HEAD"],
        cachedMethods: ["GET", "HEAD"],
        forwardedValues: {
            queryString: false,
            cookies: {
                forward: "none",
            },
        },
        minTtl: 0,
        defaultTtl: 3600,
        maxTtl: 86400,
    },
    priceClass: "PriceClass_100",
    restrictions: {
        geoRestriction: {
            restrictionType: "none",
        },
    },
    viewerCertificate: {
        cloudfrontDefaultCertificate: true,
    },
    webAclId: webAcl.id,  // Associate the Web ACL with the CloudFront distribution
});

// Export the CloudFront distribution domain name
export const cdnUrl = distribution.domainName;

Summary

In this guide, we created an AWS CloudFront distribution and protected it from cross-site scripting (XSS) attacks using AWS WAF Regional. We defined an XSS match set, created a Web ACL with the XSS match set, and associated the Web ACL with the CloudFront distribution. This setup ensures that any potential XSS attacks are blocked, enhancing the security of our web application.

Deploy this code

Want to deploy this code? Sign up for a free Pulumi account to deploy in a few clicks.

Sign up

New to Pulumi?

Want to deploy this code? Sign up with Pulumi to deploy in a few clicks.

Sign up