Skip to content

enable safe hrefs by default #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 26, 2020
Merged

enable safe hrefs by default #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,14 +304,15 @@ setClassNamePrefix('📦')

### Safe `href`s

By default `ui-box` does not ensure that urls use safe protocols when passed to an element. But we built this functionality into `ui-box` to protect the end users of the products you are building. You can alter this by using `configureSafeHref({enabled?: boolean, origin?: string})`. This will ensure that only safe protocols are used (`http:`, `https:`, `mailto:`, `tel:`, and `data:`) and that the correct `rel` values are added (`noopener`, `noreferrer`(for external links)).
By default `ui-box` ensures that urls use safe protocols when passed to an element. We built this functionality into `ui-box` to protect the end users of the products you are building. You can opt-out of this by using `configureSafeHref({enabled?: boolean, origin?: string})`. This allows you to configure which protocols are acceptable (`http:`, `https:`, `mailto:`, `tel:`, and `data:`) and that the correct `rel` values are added (`noopener`, `noreferrer`(for external links)).

```js
import { configureSafeHref } from 'ui-box'
configureSafeHref({
enabled: true,
enabled: true, // the default behavior
})
```

```js
import { configureSafeHref } from 'ui-box'
configureSafeHref({
Expand All @@ -320,10 +321,10 @@ configureSafeHref({
})
```

Additionally you can overwrite the behavoir on an individual component basis using the prop `allowUnsafeHref`
Additionally you can override the behavior on an individual component basis using the prop `allowUnsafeHref`

```jsx
<Box is="a" href="javascript:alert('hi')" allowUnsafeHref={true}>This is unsafe</Box>
<Box is="a" href="javascript:alert('hi')" allowUnsafeHref>This is unsafe</Box>
```

### Server side rendering
Expand Down
6 changes: 3 additions & 3 deletions src/utils/safeHref.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ export interface SafeHrefConfigObj {

const PROTOCOL_REGEX = /^[a-z]+:/
const ORIGIN_REGEX = /^(?:[a-z]+:?:)?(?:\/\/)?([^\/\?]+)/
let useSafeHref = false
let useSafeHref = true
let globalOrigin = typeof window !== 'undefined' ? window.location.origin : false

export function configureSafeHref(configObject: SafeHrefConfigObj) {
if (typeof configObject.enabled !== 'undefined') {
if (typeof configObject.enabled === 'boolean') {
useSafeHref = configObject.enabled
}

Expand Down Expand Up @@ -51,7 +51,7 @@ export function getURLInfo(url: string): URLInfo {
if (!isSafeProtocol) {
/**
* If the url is unsafe, put a error in the console, and return the URLInfo object
* with the value of url being `undefined`
* with the value of url being `undefined`
*/
console.error(
'📦 `href` passed to anchor tag is unsafe. Because of this, the `href` on the element was not set. Please review the safe href documentation if you have questions.',
Expand Down