Getting Started with Website Monitoring
URIports supports various report types, activated by adding headers to your website. Adding headers is quick and easy, but some can enforce policies that might cause accessibility issues if misconfigured. We strongly recommend researching thoroughly before implementing such policies. Start with the reporting-only headers outlined here and refer to our instructions on adding headers and DNS TXT records if needed.
Before changing your website headers, sign up for a free URIports trial account. You can try our service for 30 days without any obligations or entering payment details.
Step 1 - Add domains
Start by adding a domain for which you want to receive reports. Log in to your URIports account and click on the user icon at the top right of your screen. Then click Settings.
Add the domains you want to monitor to the "Monitored Domains" section on the settings page.
Step 2 - Enable the browser Reporting API
Let's start by adding the "Report-To" (Reporting API v0) and "Reporting-Endpoints" (Reporting API v1) headers to instruct the user agent to send "Crash", "Deprecation", and "Intervention" reports to your URIports account. The endpoint configured in this header can be used for the delivery of "Network-Error-Logging", "Content Security Policy", "Cross-Origin-Embedder-Policy", "Cross-Origin-Opener-Policy" and "Permissions Policy Violation" reports too. We'll get to those in a minute.
To enable the Reporting API, you need to add the following HTTP response headers to your site configuration:
Report-To: {"group":"default","max_age":10886400,"endpoints":[{"url":"https://account-subdomain.uriports.com/reports"}],"include_subdomains":true}
Reporting-Endpoints: default="https://account-subdomain.uriports.com/reports"
Open official documentation (v0) Open official documentation (v1)
Step 3 - Enable Network-Error-Logging
While you're at it, add Network-Error-Logging (NEL) as well. This will instruct browsers to also use the Report-To header defined above when sending reports about network errors.
We have an interesting blog written about why you need Network-Error-Logging for your website.
If you have a high-traffic website, it might be a good idea to lower the "failure_fraction" to define a sampling rate. The value must be a number between 0.0 and 1.0 inclusive (e.g. 0.05 for 5%).
NEL: {"report_to":"default","max_age":2592000,"include_subdomains":true,"failure_fraction":1.0}
Step 4 - Enable Content Security Policy
After that, the Content Security Policy (CSP). This HTTP response header has both a "report only" and "an enforce" variation. We'll get you started by adding the "report only" version. This will instruct browsers to send reports whenever a violation is triggered.
By adding the following header, you will instruct the user agents to only allow content from the domain itself ("self"). Other sources will be logged and reported. This will give you great insight into the content sources that are used while browsing your site. And the sources you want to allow can then be added to your CSP policy. Over time, when you’re content with your policy, you can enforce it by changing the header name from Content-Security-Policy-Report-Only to Content-Security-Policy and adjust the report-uri to https://account-subdomain.uriports.com/reports/enforce.
We have a nice write-up about how to create a solid and secure Content Security Policy.
But for now, we only want to enable logging. We do this by adding the following header:
Content-Security-Policy-Report-Only: default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; frame-ancestors 'self'; report-uri https://account-subdomain.uriports.com/reports/report; report-to default
If you cannot modify server headers, use our JavaScript CSP Report Handler to enable reporting. Learn more
IMPORTANT: Adding a CSP to a high-traffic website without including necessary sources can generate excessive reports and exhaust your quota quickly. Avoid this by following our step-by-step guide.
Step 5 - Enable Permissions Policy
The Permissions Policy (previously known as Feature Policy) specification defines a mechanism that allows developers to selectively enable and disable the use of various browser features and APIs. A report is sent using the Reporting API defined above whenever a violation is triggered.
There is no "disallow all" function, so you need to configure each feature you want to allow or disallow. You can find the official list of available features and their definitions here. To help you generate a complete Permissions Policy have a look at permissionspolicy.com.
By enabling the "Report-Only" version of this header, you will get reports of violations triggered by your site visitors without actually breaking anything. These violation reports can be a big help in implementing these headers.
Permissions-Policy-Report-Only: microphone=();report-to=default, camera=(self "https://www.example.com");report-to=default, fullscreen=*;report-to=default, payment=self;report-to=default
Step 6 - Enable COOP / COEP
Some web APIs increase the risk of side-channel attacks like Spectre. To mitigate that risk, browsers offer an opt-in-based isolated environment called "cross-origin isolated". Use Cross-Origin Opener Policy (COOP) and Cross-Origin Embedder Policy (COEP) to set this up for your website.
The COOP HTTP response header allows you to ensure a top-level document does not share a browsing context group with cross-origin documents. The COEP HTTP response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission (using CORP or CORS).
By enabling the "Report-Only" version of this header, you will get reports of violations triggered by your site visitors without actually breaking anything. These violation reports can be a big help in implementing these headers. Make sure you've set up the Reporting API to specify a destination for the reports.
Cross-Origin-Embedder-Policy-Report-Only: require-corp; report-to="default"
Cross-Origin-Opener-Policy-Report-Only: same-origin; report-to="default"
WARNING: Keep in mind that adding these headers to a high-traffic website could result in a lot of violations and reports that could exhaust your quota within a few minutes. Be careful and omit the "report-to" directives first to monitor the "Developer Tools" console (press F12) inside your web browser while browsing your website. Fix all violations until there are none left. After that, you can add the "report-to" directives to instruct browsers to send the violation reports to us.
Open official documentation COOP Open official documentation COEP
That's it!
Well done, and thanks for using URIports for your Website Monitoring.
Want to learn more? Read some of our in-depth blogs: