ref: cleanup og meta serialization

.changeset/shiny-fishes-raise.md

@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": minor
+---
+
+cleanup head meta serialization

packages/rrweb-snapshot/src/snapshot.ts

@@ -280,7 +280,7 @@
  // should warn? maybe a text node isn't attached to a parent node yet?
  return false;
  } else {
  el = dom.parentElement(node)!;
  }
  try {
  if (typeof maskTextClass === 'string') {
@@ -700,10 +700,10 @@
  const recordInlineImage = () => {
  image.removeEventListener('load', recordInlineImage);
  try {
  canvasService!.width = image.naturalWidth;
  canvasService!.height = image.naturalHeight;
  canvasCtx!.drawImage(image, 0, 0);
  attributes.rr_dataURL = canvasService!.toDataURL(
  dataURLOptions.type,
  dataURLOptions.quality,
  );
@@ -796,11 +796,46 @@
 function lowerIfExists(
  maybeAttr: string | number | boolean | undefined | null,
 ): string {
- if (maybeAttr === undefined || maybeAttr === null) {
+ if (typeof maybeAttr !== 'string') {
  return '';
- } else {
- return (maybeAttr as string).toLowerCase();
  }
+
+ return maybeAttr.toLowerCase();
+}
+
+const HEAD_META_REGEXP = /^description|keywords$/;
+const HEAD_ICON_REGEXP = /^msapplication-tile(image|color)$/;
+const HEAD_META_SOCIAL_TWITTER_REGEXP = /^(og|twitter):/;
+const HEAD_META_SOCIAL_TWITTER_OR_FB_REGEXP = /^(og|twitter|fb):/;
+const HEAD_META_ARTICLE_OR_PRODUCT_REGEXP = /^(product|article):/;
+
+function isPreloadLink(
+ sn: serializedNode,
+ slimDOMOptions: SlimDOMOptions,
+): boolean {
+ if (sn.type !== NodeType.Element) return false;
+ if (!slimDOMOptions.script) return false;
+
+ return (
+ sn.tagName === 'link' &&
+ sn.attributes.as === 'script' &&
+ (sn.attributes.rel === 'preload' || sn.attributes.rel === 'modulepreload')
+ );
+}
+
+function isPrefetchLink(
+ sn: serializedNode,
+ slimDOMOptions: SlimDOMOptions,
+): boolean {
+ if (sn.type !== NodeType.Element) return false;
+ if (!slimDOMOptions.script) return false;
+
+ return (
+ sn.tagName === 'link' &&
+ sn.attributes.rel === 'prefetch' &&
+ typeof sn.attributes.href === 'string' &&
+ extractFileExtension(sn.attributes.href) === 'js'
+ );
 }
 
 function slimDOMExcluded(
@@ -812,81 +847,84 @@
  return true;
  } else if (sn.type === NodeType.Element) {
  if (
- slimDOMOptions.script &&
- // script tag
- (sn.tagName === 'script' ||
- // (module)preload link
- (sn.tagName === 'link' &&
- (sn.attributes.rel === 'preload' ||
- sn.attributes.rel === 'modulepreload') &&
- sn.attributes.as === 'script') ||
- // prefetch link
- (sn.tagName === 'link' &&
- sn.attributes.rel === 'prefetch' &&
- typeof sn.attributes.href === 'string' &&
- extractFileExtension(sn.attributes.href) === 'js'))
+ isPreloadLink(sn, slimDOMOptions) ||
+ isPrefetchLink(sn, slimDOMOptions)
  ) {
  return true;
- } else if (
- slimDOMOptions.headFavicon &&
- ((sn.tagName === 'link' && sn.attributes.rel === 'shortcut icon') ||
- (sn.tagName === 'meta' &&
- (lowerIfExists(sn.attributes.name).match(
- /^msapplication-tile(image|color)$/,
- ) ||
- lowerIfExists(sn.attributes.name) === 'application-name' ||
- lowerIfExists(sn.attributes.rel) === 'icon' ||
- lowerIfExists(sn.attributes.rel) === 'apple-touch-icon' ||
- lowerIfExists(sn.attributes.rel) === 'shortcut icon')))
+ }
+
+ const snAttributeName = lowerIfExists(sn.attributes.name);
+ const snAttributeRel = lowerIfExists(sn.attributes.rel);
+
+ if (
+ (slimDOMOptions.headFavicon &&
+ (snAttributeName === 'application-name' ||
+ snAttributeRel === 'icon' ||
+ snAttributeRel === 'apple-touch-icon' ||
+ snAttributeRel === 'shortcut icon')) ||
+ (sn.tagName === 'link' && snAttributeRel === 'shortcut icon') ||
+ (sn.tagName === 'meta' && HEAD_ICON_REGEXP.test(snAttributeName))
  ) {
  return true;
- } else if (sn.tagName === 'meta') {
+ }
+
+ if (sn.tagName === 'meta') {
  if (
  slimDOMOptions.headMetaDescKeywords &&
- lowerIfExists(sn.attributes.name).match(/^description|keywords$/)
+ HEAD_META_REGEXP.test(snAttributeName)
  ) {
  return true;
- } else if (
+ }
+
+ const snAttributeProperty = lowerIfExists(sn.attributes.property);
+ if (
  slimDOMOptions.headMetaSocial &&
- (lowerIfExists(sn.attributes.property).match(/^(og|twitter|fb):/) || // og = opengraph (facebook)
- lowerIfExists(sn.attributes.name).match(/^(og|twitter):/) ||
- lowerIfExists(sn.attributes.name) === 'pinterest')
+ (snAttributeName === 'pinterest' ||
+ HEAD_META_SOCIAL_TWITTER_OR_FB_REGEXP.test(snAttributeProperty) || // og = opengraph (facebook)
+ HEAD_META_SOCIAL_TWITTER_REGEXP.test(snAttributeName))
  ) {
  return true;
- } else if (
+ }
+
+ if (
  slimDOMOptions.headMetaRobots &&
- (lowerIfExists(sn.attributes.name) === 'robots' ||
- lowerIfExists(sn.attributes.name) === 'googlebot' ||
- lowerIfExists(sn.attributes.name) === 'bingbot')
+ (snAttributeName === 'robots' ||
+ snAttributeName === 'googlebot' ||
+ snAttributeName === 'bingbot')
  ) {
  return true;
- } else if (
+ }
+
+ if (
  slimDOMOptions.headMetaHttpEquiv &&
  sn.attributes['http-equiv'] !== undefined
  ) {
  // e.g. X-UA-Compatible, Content-Type, Content-Language,
  // cache-control, X-Translated-By
  return true;
- } else if (
+ }
+
+ if (
  slimDOMOptions.headMetaAuthorship &&
- (lowerIfExists(sn.attributes.name) === 'author' ||
- lowerIfExists(sn.attributes.name) === 'generator' ||
- lowerIfExists(sn.attributes.name) === 'framework' ||
- lowerIfExists(sn.attributes.name) === 'publisher' ||
- lowerIfExists(sn.attributes.name) === 'progid' ||
- lowerIfExists(sn.attributes.property).match(/^article:/) ||
- lowerIfExists(sn.attributes.property).match(/^product:/))
+ (snAttributeName === 'author' ||
+ snAttributeName === 'generator' ||
+ snAttributeName === 'framework' ||
+ snAttributeName === 'publisher' ||
+ snAttributeName === 'progid' ||
+ HEAD_META_ARTICLE_OR_PRODUCT_REGEXP.test(snAttributeProperty))
  ) {
  return true;
- } else if (
+ }
+
+ if (
  slimDOMOptions.headMetaVerification &&
- (lowerIfExists(sn.attributes.name) === 'google-site-verification' ||
- lowerIfExists(sn.attributes.name) === 'yandex-verification' ||
- lowerIfExists(sn.attributes.name) === 'csrf-token' ||
- lowerIfExists(sn.attributes.name) === 'p:domain_verify' ||
- lowerIfExists(sn.attributes.name) === 'verify-v1' ||
- lowerIfExists(sn.attributes.name) === 'verification' ||
- lowerIfExists(sn.attributes.name) === 'shopify-checkout-api-token')
+ (snAttributeName === 'google-site-verification' ||
+ snAttributeName === 'yandex-verification' ||
+ snAttributeName === 'csrf-token' ||
+ snAttributeName === 'p:domain_verify' ||
+ snAttributeName === 'verify-v1' ||
+ snAttributeName === 'verification' ||
+ snAttributeName === 'shopify-checkout-api-token')
  ) {
  return true;
  }