Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Layout in Bootstrap

Posted by Ashley New
Ashley New
12,036 Points

Id be curious to know what the integrity and cross origin attributes do in the bootstrap CDN.

''' <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Full Stack Conf</title> <!-- bootstrap css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body>

<!-- jQuery first, then bootstrap js -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>

'''

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

These confirm the validity of the loaded resource.

The integrity attribute provides a message digest, similar to a hash code, that is derived from the file to be loaded. If the value computed from the incoming file does not match, the the entire file is discarded and the load fails. This prevents any tampering with the resource.

The crossorigin attribute specifies how requests are to be made when resources are loaded from sites other than the one the page itself came from. The "anonymous" setting indicates that special credentials do not need to be supplied to access the resource.

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

Agree with Steven and would like to add that this is not something special for bootstrap. It is a <script> attributes like a well-known src, which you use when add your external scripts to the page. You can read about all attributes here: https://developer.mozilla.org/en/docs/Web/HTML/Element/script