Do not set crossorigin attribute when preloading stylesheets

The `crossorigin="anonymous"` attribute was added to `<link
rel="preload">` elements created by the boot script because it was
needed when preloading API responses, so that the response can be read.

We don't need to use cross-origin requests when preloading stylesheets
however, and we were seeing occassional errors in Chrome due to this
(see https://github.com/hypothesis/client/issues/3987).

src/annotator/util/shadow-root.js

@@ -14,10 +14,6 @@ function loadStyles(shadowRoot) {
   }
 
   const linkEl = document.createElement('link');
-
-  // This needs to match the `crossorigin` attribute on the preloaded stylesheet.
-  linkEl.crossOrigin = 'anonymous';
-
   linkEl.rel = 'stylesheet';
   linkEl.href = url;
   shadowRoot.appendChild(linkEl);

src/boot/boot.js

@@ -109,13 +109,19 @@ function injectLink(doc, rel, type, url) {
  * @param {string} type - Type of resource
  * @param {string} url
  */
-function preloadUrl(doc, type, url) {
+function preloadURL(doc, type, url) {
   const link = doc.createElement('link');
   link.rel = 'preload';
   link.as = type;
-  link.crossOrigin = 'anonymous';
   link.href = url;
 
+  // If this is a resource that we are going to read the contents of, then we
+  // need to make a cross-origin request. For other types, use a non cross-origin
+  // request which returns a response that is opaque.
+  if (type === 'fetch') {
+    link.crossOrigin = 'anonymous';
+  }
+
   tagElement(link);
   doc.head.appendChild(link);
 }
@@ -178,7 +184,7 @@ export function bootHypothesisClient(doc, config) {
   injectLink(doc, 'notebook', 'html', config.notebookAppUrl);
 
   // Preload the styles used by the shadow roots of annotator UI elements.
-  preloadUrl(doc, 'style', assetURL(config, 'styles/annotator.css'));
+  preloadURL(doc, 'style', assetURL(config, 'styles/annotator.css'));
 
   // Register the URL of the annotation client which is currently being used to drive
   // annotation interactions.
@@ -218,8 +224,8 @@ export function bootHypothesisClient(doc, config) {
  */
 export function bootSidebarApp(doc, config) {
   // Preload `/api/` and `/api/links` API responses.
-  preloadUrl(doc, 'fetch', config.apiUrl);
-  preloadUrl(doc, 'fetch', config.apiUrl + 'links');
+  preloadURL(doc, 'fetch', config.apiUrl);
+  preloadURL(doc, 'fetch', config.apiUrl + 'links');
 
   const polyfills = polyfillBundles(commonPolyfills);
 

src/boot/test/boot-test.js

@@ -126,7 +126,7 @@ describe('bootstrap', () => {
         'https://marginal.ly/client/build/styles/annotator.1234.css'
       );
       assert.equal(preloadLinks[0].as, 'style');
-      assert.equal(preloadLinks[0].crossOrigin, 'anonymous');
+      assert.equal(preloadLinks[0].crossOrigin, null);
     });
 
     it('creates the link to the sidebar iframe', () => {