Back to guides

UserWay Widget JavaScript CSP and SRI integration

Like nearly any programming language, JavaScript can be vulnerable to outside attacks, which can compromise your website. The good news is that UserWay has additional security features that offer your Widget robust protection: Content Security Policy (CSP) and Extra Protection of Sub-Resource Integrity (SRI). 

With that in mind, let’s learn why CSP and SRI are critical to protecting your Widget JavaScript and website. We start with a definition of CSP and how to set yours up. 

Setting up your CSP

Content Security Policy (CSP) is a security standard that helps prevent attacks like Cross-Site Scripting (XSS) and data injection. These attacks inject malicious scripts into web pages, often through form inputs or URL manipulation. CSP helps mitigate these risks by specifying which dynamic resources can load, limiting the potential for damaging code. 

Step-by-step instructions for setting up CSP:

1. Define a CSP header

Action: Add a Content-Security-Policy HTTP header to your web server’s response.

Purpose: This header contains the rules for what content is allowed or restricted on your website.

Example:

Content-Security-Policy: default-src ‘self’; script-src ‘self’ https://trusted-scripts.com;

2. Enabling UserWay

Some CSP directives require specific configuration for the UserWay widget. The following directives are sensitive to UserWay’s functioning:

  • script-src
  • style-src
  • img-src
  • frame-src
  • font-src
  • connect-src.

If you have any of these directives, you need to include UserWay in your configuration. 

Here’s how:

DirectiveExampleDescription
img-srcimg-src ‘self’ data: https://*.userway.org/ …;Include UserWay domains and data: scheme (for inline images).
style-srcstyle-src ‘self’ ‘unsafe-inline’ https://*.userway.org/ …;UserWay requires ‘unsafe-inline’ for inline styles.
script-srcscript-src ‘self’ https://*.userway.org/ …;Allow scripts from UserWay’s domain.
frame-srcframe-src ‘self’ https://*.userway.org/ …;Include UserWay domains for iframes.
font-srcfont-src ‘self’ https://*.userway.org/ …;Allow fonts from UserWay’s domain.
connect-srcconnect-src ‘self’ … *.userway.org/ …;Specify domains allowed for XHR, WebSockets, etc.

3. Test your CSP configuration

Action: Testing it in a controlled environment is crucial before fully implementing your CSP.

Method: Use a tool like CSP Evaluator or enable CSP in report-only mode on your server. This mode logs policy violations without actually enforcing them.

Goal: Ensure that legitimate resources are not blocked and the policy correctly restricts unauthorized content.

4. Monitor for CSP violations

Action: Implement CSP reporting.

Method: Use the report-uri or report-to directive in your CSP header. Specify a URL where the browser should send reports of policy violations.

Example:

Content-Security-Policy: …; report-uri https://your-report-collector.example.com;

Purpose: Allows you to collect data on any attempted or actual policy violations, helping to adjust and fine-tune your CSP.

5. Regularly update your CSP

Action: Periodically review and update your CSP.

Reason: Your website may evolve, need new services, or change security standards.

Recommendation: Regularly review CSP logs and update the policy to reflect changes in your website’s structure, third-party services, and security best practices.

6. Educate Your Team

Action: Ensure your development and content teams know CSP and its implications.

Purpose: To prevent introducing content or code that violates the CSP, potentially causing functionality issues or security vulnerabilities.

Now, let’s learn why SRI is essential protection for your JavaScript. 

The extra protection of SRI for your Widget JavaScript

SRI harnesses a browser feature to ensure yourUserWay JavaScript is used strictly as intended. This security measure helps protect websites against the risk of tampered or compromised outside resources like scripts or stylesheets. The “Extra Protection” refers to an additional layer of security it provides for web apps. 

Here’s an overview of SRI and how it protects your website code:

  • Protection Against Code Injection Attacks: SRI ensures that only authorized and unaltered code is executed in the browser, reducing the risk of cross-site scripting (XSS) attacks and similar vulnerabilities.
  • Mitigation of Third-Party Risks: Many websites use third-party content delivery networks (CDNs) or external libraries for better performance and functionality. SRI helps reduce the associated risks. Even if a CDN or external library is compromised, SRI ensures the expected and verified code on the client side.
  • Preventing Unauthorized Changes: SRI protects against accidental and malicious changes to outside resources. The browser detects external scripts or stylesheets modified without your dev team’s knowledge or consent, preventing the execution of these resources.
  • Enhanced Website Security: Additional layers of protection are crucial In the ever-evolving web security landscape. SRI reduces the area vulnerable to attack, making it more challenging for bad actors to damage your website.

Protecting your JavaScript with CSP and SRI are just two examples of UserWay’s commitment to supporting more secure websites for our customers. Hopefully, this blog will give you added peace of mind with our Accessibility Widget. Learn more about our full range of products and services below. 

UserWay: for all your accessibility and compliance needs

In addition to the Accessibility Widget, UserWay offers a complete framework of accessibility/compliance products and services, including attorney-led legal support, enterprise solutions, accessibility auditing, managed accessibility services, and more. 

Explore your options today. 

 

Answers to Common FAQs

It restricts the resources, including scripts and images, that webpages can load. It also restricts whether outside pages can frame a page.

CSP defines which content sources are approved and loadable by a browser. SRI, on the other hand, provides a cryptographic hash that the fetched file must match.

The integrity attribute enables browsers to ensure that manipulated code never loads.

Ready to Make Your Website Accessible?