Getting Started with Website Monitoring

Get clear, real-time insight into the health and performance of your website. Monitor violations, network errors, certificate issues, deprecated code, and more! Utilize the free built-in capabilities of your site visitors' browsers to quickly identify and resolve security, content, and connectivity issues with your domain without installing additional scripts or software.

URIports supports many report types that you can monitor. In this guide, we will show you what you need to do to set up the report types. All report types can be activated by adding headers to your website.

Setting up report headers and is easy, and it takes a matter of minutes. While some of them are only instructed to send reports, others can enforce policies that can leave your website inaccessible if configured incorrectly. We recommend that you do your own research before enforcing policies. So, to get you started right away without any risk, we’re going to help you implement the ones that only send reports.

If you don't know how to add records to your DNS or how to add an HTTP response header to your site's configuration, you can find out on this page.


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

Related Reports
Crash
Deprecation
Intervention

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

Related Reports
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}

Open official documentation


Step 4 - Enable Content Security Policy

Related Reports
Content Security Policy (CSP)

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

Open official documentation


Step 5 - Enable Permissions Policy

Related Reports
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=(), camera=(self "https://www.example.com"), fullscreen=*, payment=self

Open official documentation


Step 6 - Enable COOP / COEP

Related Reports
Cross-Origin-Opener-Policy (COOP)
Cross-Origin-Embedder-Policy (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:

How to create a solid and secure Content Security Policy

Why you need Network Error Logging (NEL)