8a9182cd-ca4b-41b1-be5a-c1a6cfe0e46a

Committed 27 Jun 2024 01:57PM CUT coverage: 85.301% (+0.004%) from 85.297%

Build # 8a9182cd-ca4b-41b1-be5a-c1a6cfe0e46a

Build Type

push

circleci

Committed by

jwhitlock

Commit Message

Disable inline style in next/image

Image from next/image adds an inline style="color:transparent" to many
SVG images. This causes CSP violations in production, and the style is ignored.

This PR replaces Image with a local version that turns the inline style
into a className with the color:transparent style. It only handles this
variant, which was tested to be the only inline style emitted by next.js.

Run Details

4011 of 5156 branches covered (77.79%)

Branch coverage included in aggregate %.

38 of 43 new or added lines in 30 files covered. (88.37%)

15760 of 18022 relevant lines covered (87.45%)

11.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

80.77

/frontend/src/components/Image.tsx

// Work around next.js adding inline style color:transparent
// This breaks our CSP rules about inline styles.
// More context and some suggested solutions from:
// https://0xdbe.github.io/NextJS-CSP-NextImage/
//
// If this is fixed in a future next.js release, replace:
// import Image from "../path/to/Image";
// with
// import Image from next/image;

import NextImage, { getImageProps } from "next/image";
import { ComponentProps } from "react";
import styles from "./Image.module.scss";

export default function Image(props: ComponentProps<typeof NextImage>) {
  const altText = props.alt;
  const { props: nextProps } = getImageProps({ ...props });
  const { style, className: origClassName, ...delegated } = nextProps;
  const debugStyles = false; // Set to true to fail build on new inline styles

  let className = origClassName || "";
  if (typeof style === "object" && style !== null) {
    if (Object.keys(style).length === 1 && style.color === "transparent") {
      className = `${className} ${styles.transparent}`.trim();
    } else if (debugStyles) {
      throw new Error(
        `Update components/Image.tsx, unexpected style value: ${JSON.stringify(style)}`,
      );
    }
  }

  if (className !== "") {
    return <img className={className} {...delegated} alt={altText} />;
  } else {
    return <img {...delegated} alt={altText} />;
  }
}

1	// Work around next.js adding inline style color:transparent
2	// This breaks our CSP rules about inline styles.
3	// More context and some suggested solutions from:
4	// https://0xdbe.github.io/NextJS-CSP-NextImage/
5	//
6	// If this is fixed in a future next.js release, replace:
7	// import Image from "../path/to/Image";
8	// with
9	// import Image from next/image;
10
11	import NextImage, { getImageProps } from "next/image";	12✔
12	import { ComponentProps } from "react";
13	import styles from "./Image.module.scss";	12✔
14
15	export default function Image(props: ComponentProps<typeof NextImage>) {	1,621✔
16	const altText = props.alt;	1,136✔
17	const { props: nextProps } = getImageProps({ ...props });	1,136✔
18	const { style, className: origClassName, ...delegated } = nextProps;	1,136✔
19	const debugStyles = false; // Set to true to fail build on new inline styles	1,136✔
20
21	let className = origClassName \|\| "";	1,136✔
22	if (typeof style === "object" && style !== null) {	1,136✔
23	if (Object.keys(style).length === 1 && style.color === "transparent") {	1,136!
24	className = `${className} ${styles.transparent}`.trim();	1,136✔
NEW 25	} else if (debugStyles) {	×
NEW 26	throw new Error(	×
27	`Update components/Image.tsx, unexpected style value: ${JSON.stringify(style)}`,
28	);
29	}
30	}
31
32	if (className !== "") {	1,136!
33	return <img className={className} {...delegated} alt={altText} />;
34	} else {
35	return <img {...delegated} alt={altText} />;
36	}
37	}

mozilla / fx-private-relay / 8a9182cd-ca4b-41b1-be5a-c1a6cfe0e46a

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous