Failed to find a valid digest in the 'integrity' attribute for resource
  • 17-May-2023
Lightrun Team
Author Lightrun Team
Failed to find a valid digest in the 'integrity' attribute for resource

Failed to find a valid digest in the ‘integrity’ attribute for resource

Lightrun Team
Lightrun Team

Explanation of the problem


The integration of Offen into my websites encountered several obstacles. Here is an overview of the setup: The latest version of Offen was obtained from Docker Hub, and the websites utilize an nginx server as a reverse proxy. The Offen Docker image is deployed under the domain “”, while the web application process is hosted under “”. However, the integration process resulted in the following errors.

When accessing “”, the error message “Refused to display ‘‘ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin'” was encountered. This error is associated with the X-Frame-Options header, which prevents the site from being loaded within an iframe due to the same-origin policy. Although removing the X-Frame-Options header resolves the issue, a solution is sought to preserve this header.

However, removing the X-Frame-Options header allowed Offen to load successfully. Nonetheless, two additional errors were observed, which also occurred when visiting the Offen Auditorium. The first error states “Failed to find a valid digest in the ‘integrity’ attribute for resource ‘‘ with computed SHA-256 integrity ‘7h+DJVtMpNr1FVMcCV2spIwSjnKvTKLBR8VCunEO6IE=’. The resource has been blocked.” The second error is similar and indicates a failure to find a valid digest for the resource ‘‘ with the computed SHA-256 integrity ‘EUQKQfu5yNZ7NP1VpXeomJrtWqIK1E3GMHeGFRUcC+s=’. These errors relate to the integrity attribute of the script resources, which are being blocked due to mismatched or missing digests.


Troubleshooting with the Lightrun Developer Observability Platform


Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Failed to find a valid digest in the ‘integrity’ attribute for resource


To address the X-Frame-Options issue, one possible solution is to configure nginx to allow framing from specific domains while keeping the X-Frame-Options header intact. This can be achieved by adding the add_header directive to the nginx configuration file for the specific location or server block where Offen is being served. Here’s an example:


location /vault/ {
    add_header X-Frame-Options "ALLOW-FROM";
    # Other directives...


In this example, the X-Frame-Options header is set to allow framing only from the domain ““. Adjust the domain according to your specific requirements.

Regarding the integrity attribute errors, it appears that the computed digests for the script resources in the Offen vault are not matching the expected values. To resolve this, you may need to ensure that the integrity attribute values for the script resources in the HTML file match the actual computed digests. Here’s an example of how the integrity attribute can be added to a script tag:


<script src="" integrity="sha256-7h+DJVtMpNr1FVMcCV2spIwSjnKvTKLBR8VCunEO6IE=" crossorigin="anonymous"></script>


Ensure that the integrity attribute values for both “vendor-cdc94dde8f.js” and “index-405319a057.js” match the computed SHA-256 digests. This ensures that the resources are loaded only if their integrity matches the provided value.

By implementing these solutions, you should be able to resolve the X-Frame-Options issue and ensure that the script resources in the Offen vault are loaded without integrity attribute errors.


Problems with Offen


Problem 1: Cross-Origin Resource Sharing (CORS) Issues Description: One common problem with Offen is encountering Cross-Origin Resource Sharing (CORS) issues when trying to access Offen’s endpoints from a different domain. This typically occurs when the Offen server and the client application are hosted on different domains. Browsers enforce the Same-Origin Policy, which restricts cross-origin requests for security reasons.

Solution: To resolve CORS issues with Offen, you need to configure the server to include the appropriate CORS headers in its responses. This allows the client application to make cross-origin requests to Offen’s endpoints. Here’s an example of how to configure CORS headers in the server:


package main

import (


func main() {
	// Create a new mux router
	mux := http.NewServeMux()

	// ... Define your Offen routes

	// Create a new CORS handler
	c := cors.Default().Handler(mux)

	// Start the server with the CORS handler
	http.ListenAndServe(":8080", c)


In the above example, the cors.Default() function from the package is used to create a CORS middleware with default options. This middleware is then applied to the main router of your server. Adjust the server configuration and CORS options according to your specific needs.

Problem 2: Integration with Single-Page Applications (SPAs) Description: Another challenge with Offen is integrating it with Single-Page Applications (SPAs) built with frameworks like React or Angular. Since SPAs handle routing on the client-side, traditional page refreshes may not occur, causing Offen’s tracking to be incomplete or inaccurate.

Solution: To ensure proper tracking in SPAs, you can use Offen’s JavaScript API to manually trigger page views or events when navigating within the SPA. Here’s an example of how to use the offen object from Offen’s JavaScript API:


import offen from 'offen';

// Initialize Offen
const tracker = offen({
  url: '',
  siteID: 'your-site-id',

// Track a page view

// Track a custom event
tracker.trackEvent('button-click', { label: 'Button A' });


By using the offen object and its methods, you can manually track relevant interactions and events within your SPA, ensuring accurate data collection by Offen.

Problem 3: Privacy Compliance and Consent Management Description: Offen is designed to prioritize user privacy and consent management. However, ensuring compliance with privacy regulations such as the General Data Protection Regulation (GDPR) can be a challenge. It requires obtaining explicit consent from users before tracking their data.

Solution: To address privacy compliance and consent management with Offen, you can implement a consent banner or dialog in your application. This allows users to provide explicit consent before Offen starts tracking their data. Here’s an example of how to implement a consent banner:


// Show a consent banner
function showConsentBanner() {
  // Display the banner in your UI

// Handle user consent
function handleConsent() {
  // Set the consent status

  // Hide the consent banner

// Check if user has provided consent
if (offen.getConsent() !== true) {


In the above example, the showConsentBanner() function displays a consent banner in your application’s UI. When the user provides consent, the handleConsent() function is called, setting the consent status in Offen using `offen.setConsent(true


A brief introduction to Offen


Offen is an open-source analytics platform that prioritizes user privacy and transparency. It provides website owners with the ability to track and analyze user interactions while respecting users’ data protection rights. Built using modern web technologies, Offen offers a self-hosted solution that allows organizations to have full control over their analytics data.

At its core, Offen consists of two main components: the Offen server and the Offen client library. The server, typically deployed on a self-hosted infrastructure, collects and stores the analytics data generated by the client applications. The client library, which is integrated into the website or web application, sends anonymized data to the server while respecting users’ privacy preferences. This decentralized architecture ensures that user data remains under the control of the website owner, promoting trust and compliance with privacy regulations.

With Offen, developers have access to a rich set of features for analyzing user behavior, including page views, event tracking, and user segmentation. The platform provides a user-friendly interface for visualizing the analytics data, allowing website owners to gain valuable insights into their audience’s behavior and optimize their online presence. By adopting Offen, organizations can prioritize privacy, gain a deeper understanding of their users, and make data-driven decisions to enhance their websites’ performance and user experience.


Most popular use cases for Offen

  1. Data Privacy-First Analytics: Offen can be used to implement privacy-friendly analytics on websites and web applications. By integrating the Offen client library into the codebase, developers can track user interactions while respecting users’ privacy preferences. The following code snippet demonstrates how to initialize the Offen client:


import Offen from 'offen';

const offen = new Offen('');


  1. Self-Hosted Analytics Solution: Offen offers a self-hosted analytics platform, allowing organizations to have full control over their data. By deploying the Offen server on their infrastructure, website owners can store and manage their analytics data locally. This enables them to comply with data protection regulations and maintain data sovereignty. The following command illustrates how to set up the Offen server using Docker:


docker run -d -p 8080:8080 offen/offen:v0.5.0


  1. Advanced Analytics and Insights: Offen provides a range of features for analyzing user behavior and gaining insights. It supports various metrics such as page views, event tracking, and user segmentation. Developers can leverage the Offen API to retrieve analytics data programmatically and perform custom analyses. For example, the following code snippet demonstrates how to fetch page views data from the Offen server:


const response = await fetch('');
const data = await response.json();


By utilizing Offen, organizations can obtain meaningful analytics data, understand user engagement patterns, and make informed decisions to optimize their websites and improve user experiences.



It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.