# eleventy-plugin-target-safe

> Automatically adds noopener to unsafe links

Latest version **0.6.0** (published 2022-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install eleventy-plugin-target-safe
pnpm add eleventy-plugin-target-safe
yarn add eleventy-plugin-target-safe
bun add eleventy-plugin-target-safe
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2022-10-20 |
| First published | 2022-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | gingerchew |
| Maintainers | gingerchew |
| Keywords | 11ty, 11ty-plugin, eleventy, eleventy-plugin |

## Links

- npm: https://www.npmjs.com/package/eleventy-plugin-target-safe
- Repository: https://github.com/gingerchew/eleventy-plugin-target-safe
- Issues: https://github.com/gingerchew/eleventy-plugin-target-safe/issues
- npm.io page: https://npm.io/package/eleventy-plugin-target-safe

## Dependencies (1)

- [jsdom](https://npm.io/package/jsdom.md) ^20.0.1

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.6.0 (latest) — 2022-10-20
- 0.5.5 — 2022-10-20
- 0.5.4 — 2022-10-20
- 0.5.3 — 2022-10-20
- 0.5.2 — 2022-10-20

## README

# Keep your outbound links safe

Link tags (`<a>`) with the `target` attribute may sometimes need a little extra care. This plugin is meant to do that for you automatically.

## Usage

Install using your package manager of choice

```bash
pnpm install eleventy-plugin-target-safe
```

Then, include it in your `.eleventy.js` config file:

```js
const eleventyTargetSafe = require("eleventy-plugin-target-safe");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(eleventyTargetSafe, {
    // config
  });
};
```

## Example

```html
<!-- before -->
<a target="_blank" href="https://website.com/">Unsafe Outbound Link</a>
<!-- after -->
<a target="_blank" href="https://website.com/" rel="noopener">Safe Outbound Link</a>
```

## Config Options

| Option      | Type | Default       | Explanation |
| ----------- | ---- | ------------- | ---- |
| opener | boolean | true | Adds traditional `rel="noopener"` attribute.
| follower | boolean | false | `rel="nofollower"` useful for blogs that don't want site crawlers to follow outbound links. |
| referrer | boolean | false | `rel="noreferrer"` [Read more here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noreferrer).

## Considerations

The world of web development is constantly changing. It is entirely possible you are writing code with a bias from someone who read a StackOverflow question 10 years ago, and that code is now in the browser and you just don't know it. That's why I wanted to include these two articles that talk specifically about what the `rel="noopener"` attribute does, and come from sources that are reliable.

Check out this [article](https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/) by Jake Archibald. There is also this note on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener), that in browsers today, adding `target="_blank"` implicitly adds `rel="noopener"`. 

## Future

- [ ] Forms and other potentially unsafe `target` elements
- [ ] Review dependencies and see what can be removed
- [ ] ???

## See it in action

[It is currently in use here.](https://resourcesandhelp.netlify.app)

## Credits

[11ty](https://www.11ty.dev)

[11ty Plugin Template](https://github.com/5t3ph/eleventy-plugin-template)

---
_Source: https://npm.io/package/eleventy-plugin-target-safe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._