feat(core): whitelist styles with useHeadSafe() (#491)

* feat(core): whitelist styles with `useHeadSafe()`

* doc: missing doc

Author: harlan-zw

docs/7.api/1.use-head-safe.md

@@ -9,23 +9,23 @@ The `useHeadSafe` composable is a wrapper around the [useHead](/guide/composable
 
 There is a whitelist of allowed tags and attributes. If you try to use a tag or attribute that isn't on the whitelist, it will be ignored.
 
-The whitelist is very restrictive, as there are many vectors for XSS attacks. If you need to use a tag or attribute that isn't on the whitelist, you can use the [useHead](/guide/composables/use-head) composable instead,
+The whitelist is restrictive, as there are many vectors for XSS attacks. If you need to use a tag or attribute that isn't on the whitelist, you can use the [useHead](/guide/composables/use-head) composable instead,
 just make sure **you sanitise the input**.
 
 The whitelist is as follows:
 
 ```ts
 const WhitelistAttributes = {
-  htmlAttrs: ['id', 'class', 'lang', 'dir'],
-  bodyAttrs: ['id', 'class'],
-  meta: ['id', 'name', 'property', 'charset', 'content'],
-  noscript: ['id', 'textContent'],
-  script: ['id', 'type', 'textContent'],
-  link: ['id', 'color', 'crossorigin', 'fetchpriority', 'href', 'hreflang', 'imagesrcset', 'imagesizes', 'integrity', 'media', 'referrerpolicy', 'rel', 'sizes', 'type'],
-}
+  htmlAttrs: ['class', 'style', 'lang', 'dir'] satisfies (keyof HtmlAttributes)[],
+  bodyAttrs: ['class', 'style'] satisfies (keyof BodyAttributes)[],
+  meta: ['name', 'property', 'charset', 'content', 'media'] satisfies (keyof Meta)[],
+  noscript: ['textContent'] satisfies (Partial<keyof Noscript> | 'textContent')[],
+  style: ['media', 'textContent', 'nonce', 'title', 'blocking'] satisfies (Partial<keyof Style> | 'textContent')[],
+  script: ['type', 'textContent', 'nonce', 'blocking'] satisfies (Partial<keyof Script> | 'textContent')[],
+  link: ['color', 'crossorigin', 'fetchpriority', 'href', 'hreflang', 'imagesrcset', 'imagesizes', 'integrity', 'media', 'referrerpolicy', 'rel', 'sizes', 'type'] satisfies (keyof Link)[],
+} as const
 ```
 
-- Style tags and attributes not supported `<link rel="stylesheet" ...>`{lang="html"}, `<style>`{lang="html"}, they are a vector for XSS attacks and clickjacking.
 - Scripts of any sort are not allowed, except for JSON. `<script type="application/json">`{lang="html"}, use `textContent: myObject`.
 - http-equiv is not allowed on meta.
 - `data-*` attributes are allowed.
@@ -40,3 +40,7 @@ const thirdPartyMeta = loadMeta()
 
 useHeadSafe(thirdPartyMeta)
 ```
+
+## Styles
+
+While styles are permitted it's important to note that [clickjacking](https://en.wikipedia.org/wiki/Clickjacking) is still possible. You should ensure that your styles are safe to use.