vaadin/vaadin-core

Change to use external icons instead of data: base64 encoded embedded icons

Wnt opened this issue · 2 comments

Wnt commented

w3 recommends not to allow the data: protocol in Content Security Policy, but if that is not allowed many Vaadin components break visually. E.g. date picker, combobox and grid sort indicator icons are not visible
developers SHOULD NOT include either 'unsafe-inline', or data: as valid sources in their policies. Both enable XSS attacks by allowing code to be included directly in the document itself
https://www.w3.org/TR/CSP3/#csp-directives
Why are the internal icons of Vaadin components using data: base64 encoded icons instead of normal icons? Are there any plans or obstacles to change using external icons?

image

Example Vaadin UI where a CSP dos not allow the use of data:protocol:

public class MainView extends VerticalLayout implements PageConfigurator {
	private static String csp;
	static {
		String defaultSrc = "default-src 'self'";
		String styleSrc = "style-src 'unsafe-inline' 'self'";
		String fontSrc = "font-src 'self'";
		String scriptSrc = "script-src 'unsafe-inline' 'unsafe-eval' 'self'";

		csp = Arrays.asList(defaultSrc, styleSrc, fontSrc, scriptSrc)

				.stream().collect(Collectors.joining("; "));
	}

	public MainView() {
		add(new DatePicker("DatePicker", LocalDate.now()));
		add(new ComboBox<>("ComboBox"));
		Grid<DatePicker> grid = new Grid<DatePicker>(DatePicker.class);
		grid.setColumns("name", "min", "max");
		add(grid);

		getChildren().forEach(child -> ((HasSize) child).setWidth("100%"));
		setWidth("100%");

	}

	@Override
	public void configurePage(InitialPageSettings settings) {
		settings.addInlineWithContents(Position.PREPEND,
				"<meta http-equiv=\"Content-Security-Policy\" content=\"" + csp + "\">", WrapMode.NONE);

	}
}

And the same problematic data: protocol with base 64 encoded data is used to deliver (polyfill ?) scripts to Edge:
CSP14312: Resource violated directive 'script-src 'unsafe-inline' 'unsafe-eval' 'self'' in meta http-equiv="Content-Security-Policy">: data:text/javascript;charset=utf-8,%0A%20%20%2F**%0A%20%20%40license%0A%20%20Copyright%20(c)%202016%20The%20Polymer%20Project%20Authors.%20All%20rights%20reserved.
meaning that if using a w3 recommended Content Security Policy, Vaadin 10+ apps are not compatible with Edge

Related to vaadin/vaadin-core#129

I feel that we will have to implement vaadin-icon component eventually. Doing that would require a lot of changes though, not sure if we want that to happen before V14

Closing in favor of #129 according to the above comment, let's discuss icons future there.