Skip to content

Commit

Permalink
Links and Images lesson: Clarify Content Fix (TheOdinProject#28467)
Browse files Browse the repository at this point in the history
* Clarify the noreferrer behaviour

* Clarify relative paths for iamges on websites

* ln65 remove white space from end of sentence
  • Loading branch information
gillettjason authored Aug 16, 2024
1 parent b9ea155 commit 8cb8ab0
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions foundations/html_css/html-foundations/links-and-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ While `href` specifies the destination link, `target` specifies where the linked

<span id="target-security"></span>You may have noticed that we snuck in the `rel` attribute above. This attribute is used to describe the relation between the current page and the linked document.

The `noopener` value prevents the opened link from gaining access to the webpage from which it was opened. The `noreferrer` value prevents the opened link from knowing which webpage or resource has a link (or 'reference') to it. It also includes the `noopener` behaviour and thus can be used by itself as well.
The `noopener` value prevents the opened link from gaining access to the webpage from which it was opened.

The `noreferrer` value prevents the opened link from knowing which webpage or resource has a link (or 'reference') to it. The `noreferrer` value also includes the `noopener` behaviour and thus can be used by itself as well.

Why do we need this added behaviour for opening links in new tabs? Security reasons. The prevention of access that is caused by `noopener` prevents [phishing attacks](https://www.ibm.com/topics/phishing) where the opened link may change the original webpage to a different one to trick users. This is referred to as [tabnabbing](https://owasp.org/www-community/attacks/Reverse_Tabnabbing). Adding the `noreferrer` value can be done if you wish to not let the opened link know that your webpage links to it.

Expand Down Expand Up @@ -172,7 +174,7 @@ For example, using an absolute path we can display an image located on The Odin

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

To use images that we have on our own websites, we can use a relative path.
To display images on your website that are hosted on your own web server, you can use a relative path.

<details markdown="block">

Expand Down

0 comments on commit 8cb8ab0

Please sign in to comment.