My Steve Jobs tribute page

Code Feedback
1

this is my first html project, i hope you like it. https://codepen.io/Charlie15/full/baGMzO

2

Hi @carloshc.15,

HTML:

Is better not use the style attribute:

<body style="padding-left: 80px; padding-right:80px;" class="text-responsive">

Because, you have multiple styles sources (Thatā€™s make the page more difficult to review.):

  • The CSS tab
  • Every element on the html with the style attribute

MDN documentation:
style - HTML: HyperText Markup Language | MDN

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

---
  • The ā€˜alignā€™ attribute is no longer valid on the <div> element and should not be used.
 <div  style="background-color: #cda;" align="center">

MDN documentation:

<div>: The Content Division element - HTML: HyperText Markup Language | MDN

Attributes

The align attribute is obsolete; do not use it anymore.

----
  • Target blank vulnerability
<a href="https://en.wikipedia.org/wiki/Steve_Jobs" target="_blank">click here</a>

MDN documentation:

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

Note: When using target, consider adding rel=ā€œnoopener noreferrerā€
to avoid exploitation of the window.opener API.

About rel=noopener

TL;DR If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.

Target="_blank" - the most underestimated vulnerability ever

People using target=ā€˜_blankā€™ links usually have no idea about this curious fact:
The page weā€™re linking to gains partial access to the linking page via the window.opener object.
The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalfā€¦ Users trust the page that is already opened, they wonā€™t get suspicious.

How to fix
Add this to your outgoing links.

rel="noopener"

Update: FF does not support ā€œnoopenerā€ so add this.

rel="noopener noreferrer"

Remember, that every time you open a new window via window.open(); youā€™re also ā€œvulnerableā€ to this, so always reset the ā€œopenerā€ property

var newWnd = window.open();
newWnd.opener = null;

Cheers and happy coding :slight_smile:

3

thank you for the feedback, i have no idea how to use _blank, thereā€™s a lot of work to do :smile:

1 Like
4

Thereā€™s nothing confusing about it.
It just means open the link in a new tab.
For a link you just set target to _blank
Like this :-
target=ā€˜_blankā€™