Tribute Page finished!

Tribute Page finished!
0

#1

Hello, just finished my tribute page. There is a lot to improve in my view but i wanna move on the challenges and review them as i feel capable and comfortable with it.

Please comment what you think can be done better (:


#2

Hi @fernandorzc,

  • Target blank vulnerability
<a target="_blank" href="https://en.wikipedia.org/wiki/Seneca_the_Younger">Wikipedia page</a>

MDN documentation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

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

https://mathiasbynens.github.io/rel-noopener/

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

https://www.jitbit.com/alexblog/256-targetblank---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;

Html inspector:

  • The <center> element is obsolete and should not be used.
<center>
<img class="image-responsive" src="https://raw.githubusercontent.com/fernandorzc/FCCTributePage/master/Duble_herma_of_Socrates_and_Seneca_Antikensammlung_Berlin_07.jpg" alt="Ancient bust of Seneca, part of the Double Herm of Socrates and Seneca (Antikensammlung Berlin)" >
...

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Deprecated
This his feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped.Do not use it in old or new projects. Pages or Web apps using it may break at any time.


Is better not use the style attribute:

<style>
      .grey-text {
        color:grey;
      }     
      .silver-background {
    background-color:silver;
      }
      .rounded-border {
    border-style: groove;
        border-radius: 5px;
        
  }
    .createdby {
    text-align: center;
      margin-top: 40px;
  }
    
</style>

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:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

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.


Cheers and happy coding :slight_smile: