 Hey there, probably casters, Rob here. Today on this show, I want to talk about a little thing called content security policy, or CSP. CSP is a JavaScript model designed to prevent attack vectors in your application. In particular, one of the things that CSP outlaws is the use of inline scripts in your HTML. Now, if you've been working with us in Polymerland for a while, you might realize that presents a bit of a problem because we often design our elements with inline scripts. We'll put a little HTML in the top, then we'll put a little script in the bottom, and that'll be our elements definition import right there. So how do we make sure that our elements are CSP compliant? Well, to do that, we're going to use a little tool called CRISPR. Now, CRISPR is going to do the work of extracting our JavaScript out of our element definitions, so that way it can work in a CSP environment. And this is really important if you're doing something like building a Chrome app or using something like Cordova, or even if you're going to use a transpile tool like Babel to take your ES6 code and turn it into ES5. Now, today on the show, what I want to do is show you how you can get CRISPR up and running in your application. I'll start by showing you the command line version of CRISPR, and then we can move on to how you can use it in a build tool like Gulp. And to start from the command line, the first thing that I want to do is just npm install dash g CRISPR. So this is going to do a global install of CRISPR and give me that binary command so I can use it anywhere I want in my terminal or my application. Once this is squared away, I can take a little starter project that I've created here, just as a demo to show off what we're going to do. I've got an import file right here called elements.html, and that's just pulling in a few elements from my elements directory. Now, what I want to do is bundle all this together and then extract the JavaScript out of it. To do that, I'm going to first create a distribution directory to hold all of my content once it's output from the tools. And then I'm going to run vulcanize, which is our concatenation tool. It's going to concatenate all of our elements together into one big bundle. And then we can pipe the content from vulcanize over to CRISPR so that way it can take that one big bundle and split it into HTML and JavaScript. To do that, I'm going to use a little pipe character at the end of my vulcanize command, hand it off to CRISPR, and tell it where I want the HTML to live, which is going to be elements.html, and tell it I want the JavaScript to live in elements.js. Now, it might seem a little weird to run vulcanize and to tell it to inline scripts and then run a whole separate tool just to pull all those scripts out again. But what we're actually doing here is we're making sure that if our elements depend on external JavaScript files, we can fetch all those files. We can bundle them together so we're not creating a ton of HTTP requests. And only once we've got everything bundled together will we extract the JavaScript into a single bundle. So this is, again, just to help us cut down on the number of requests in our application. Now, once I've run this command, I can go check out my disk directory. Inside of here, I've got two files, elements.html. If I look at that, it's got the markup for my elements. But at the top, I've also got this elements.js file. That elements.js file is all that code that CRISPR pulled out from our application. And looking at that, we can see that we've got all the JavaScript for Polymer. And if we scroll down the page, we've also got all the JavaScript for our little elements that we've created, exfoo and xbar and anything else that you might have in your application. So this is great. We've got CRISPR working in our app. But it's kind of a bummer to run these things from the command line every single time you want to do a build or a deploy of your application. It'd be a lot better if we could actually combine this with a build tool like gulp. So to do that, I'm going to go back to my terminal. I'm going to run npm install gulp CRISPR. And I'll wait, and I'll wait. OK, so we've installed CRISPR for gulp. What I'm going to do now is go to my gulp file. And this is a little gulp file that I actually started in a previous episode when we were talking about vulcanize. And what I'm going to do is just slot CRISPR in right after the vulcanize task. I'll say CRISPR equals require gulp CRISPR. And then because gulp lets us pipe the output of one task to the next, I can just rename this task to build and actually pipe the output from vulcanize right into CRISPR and then pipe all that to my disk directory. And really, that's all you've got to do to add CRISPR to your build process. It's pretty easy. I'm going to go down and rename the task in my default task from vulcanize to build. And then I can switch over to my terminal. I can run gulp. And now I'm done. I go back to my application. I look in my disk directory. And I've got elements HTML and elements JS up at the top. You can see I've got my script file there and elements HTML, elements JS, got all the JavaScript from Polymer, all the JavaScript from my elements, good to go. So if I was going to deploy this to something like Cordova or a Chrome app, I'd be set. And there's a lot more that we can do with CRISPR. Like I mentioned, we can use tools like Babble to transpile code. We could use CoffeeScript and other cool things. So I'm going to try and cover some of those in a future episode. If you enjoyed this episode, please be sure to leave us some comments down below and perhaps consider clicking that like button if you really had an awesome time. Also, if you have any questions for us, you can always ping us on a social network of your choosing at hashtag AskPolymer. As always, thank you so much for watching. And I'll see you next time. Policaster, kill you and Star Wars. I don't know. Words.