diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/2015-08-pyconau/index.html | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/src/2015-08-pyconau/index.html b/src/2015-08-pyconau/index.html new file mode 100644 index 0000000..dca0882 --- /dev/null +++ b/src/2015-08-pyconau/index.html | |||
@@ -0,0 +1,215 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | |||
4 | <head> | ||
5 | <meta charset="utf-8"> | ||
6 | |||
7 | <title>PyCon AU- Talking to Browsers with CORS</title> | ||
8 | |||
9 | <meta name="description" | ||
10 | content="This session will demonstrate how to break the browser's single origin policy, and permit true separability between a Python API and a browser-based client."> | ||
11 | <meta name="author" content="Michael Krotscheck"> | ||
12 | |||
13 | <meta name="apple-mobile-web-app-capable" content="yes"/> | ||
14 | <meta name="apple-mobile-web-app-status-bar-style" | ||
15 | content="black-translucent"/> | ||
16 | |||
17 | <meta name="viewport" | ||
18 | content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> | ||
19 | |||
20 | <link rel="stylesheet" href="../css/reveal.css"> | ||
21 | <link rel="stylesheet" href="../css/font-awesome.css"> | ||
22 | <link rel="stylesheet" href="../css/font-mfizz.css"> | ||
23 | <link rel="stylesheet" href="../css/theme/serif.css" id="theme"> | ||
24 | |||
25 | <!-- Code syntax highlighting --> | ||
26 | <link rel="stylesheet" href="../lib/css/zenburn.css"> | ||
27 | |||
28 | <!-- Printing and PDF exports --> | ||
29 | <script> | ||
30 | var link = document.createElement('link'); | ||
31 | link.rel = 'stylesheet'; | ||
32 | link.type = 'text/css'; | ||
33 | link.href = | ||
34 | window.location.search.match(/print-pdf/gi) ? '../css/print/pdf.css' : | ||
35 | '../css/print/paper.css'; | ||
36 | document.getElementsByTagName('head')[0].appendChild(link); | ||
37 | </script> | ||
38 | |||
39 | <!--[if lt IE 9]> | ||
40 | <script src="../lib/js/html5shiv.js"></script> | ||
41 | <![endif]--> | ||
42 | </head> | ||
43 | |||
44 | <body> | ||
45 | |||
46 | <div class="reveal" data-transition="slide"> | ||
47 | |||
48 | <!-- Any section element inside of this container is displayed as a slide --> | ||
49 | <div class="slides"> | ||
50 | <section> | ||
51 | <h2>Talking to Browsers with CORS</h2> | ||
52 | |||
53 | <h4>Breaking the single origin policy</h4> | ||
54 | </section> | ||
55 | |||
56 | <section> | ||
57 | <dl> | ||
58 | <dt>Author:</dt> | ||
59 | <dd> | ||
60 | <a href="http://www.krotscheck.net">Michael Krotscheck</a> | ||
61 | <br/> | ||
62 | <a href="http://twitter.com/krotscheck" target="_blank"> | ||
63 | <i class="fa fa-twitter"></i> krotscheck | ||
64 | </a> | ||
65 | <br/> | ||
66 | <a href="http://www.krotscheck.net" target="_blank"> | ||
67 | <i class="fa fa-wordpress"></i> http://www.krotscheck.net | ||
68 | </a> | ||
69 | </dd> | ||
70 | <dt>Source:</dt> | ||
71 | <dd><a href="https://github.com/krotscheck/presentations"> | ||
72 | https://github.com/krotscheck/presentations | ||
73 | </a></dd> | ||
74 | <dt>License:</dt> | ||
75 | <dd><a rel="license" | ||
76 | href="http://creativecommons.org/licenses/by/4.0/">Creative | ||
77 | Commons Attribution 4.0 International</a></dd> | ||
78 | </dl> | ||
79 | </section> | ||
80 | |||
81 | <section> | ||
82 | <h2>Topics Covered</h2> | ||
83 | </section> | ||
84 | |||
85 | <section> | ||
86 | <section> | ||
87 | <h2>Single Origin Policy</h2> | ||
88 | </section> | ||
89 | <section> | ||
90 | <h2>Security Concerns</h2> | ||
91 | </section> | ||
92 | </section> | ||
93 | |||
94 | <section> | ||
95 | <section> | ||
96 | <h2>Web Application Design Patterns</h2> | ||
97 | </section> | ||
98 | <section> | ||
99 | <h2>All-in-one</h2> | ||
100 | </section> | ||
101 | <section> | ||
102 | <h2>API + UI</h2> | ||
103 | </section> | ||
104 | <section> | ||
105 | <h2>API(s) + UI + UI-Server</h2> | ||
106 | |||
107 | <p> | ||
108 | <i class="icon-python"></i> | ||
109 | </p> | ||
110 | </section> | ||
111 | </section> | ||
112 | |||
113 | <section> | ||
114 | <section> | ||
115 | <h2>CORS</h2> | ||
116 | </section> | ||
117 | <section> | ||
118 | <h2>CORS Preflight request</h2> | ||
119 | </section> | ||
120 | <section> | ||
121 | <h2>CORS Preflight response</h2> | ||
122 | </section> | ||
123 | <section> | ||
124 | <h2>CORS Http Request</h2> | ||
125 | </section> | ||
126 | <section> | ||
127 | <h2>CORS Http Response</h2> | ||
128 | </section> | ||
129 | </section> | ||
130 | |||
131 | <section> | ||
132 | <section> | ||
133 | <h2>Implementing CORS</h2> | ||
134 | <dl> | ||
135 | <dt>Apache 2</dt> | ||
136 | <dd>mod_headers</dd> | ||
137 | <dt>Nginx</dt> | ||
138 | <dd>add_headers</dd> | ||
139 | <dt>Python WSGI</dt> | ||
140 | <dd>mod_headers</dd> | ||
141 | </dl> | ||
142 | <ul> | ||
143 | <li>Apache2: mod_headers</li> | ||
144 | <li>Nginx: add_headers</li> | ||
145 | <li>Python: Middleware</li> | ||
146 | </ul> | ||
147 | </section> | ||
148 | <section> | ||
149 | <h2>mod_headers</h2> | ||
150 | </section> | ||
151 | <section> | ||
152 | <h2>CORS via WSGI</h2> | ||
153 | </section> | ||
154 | <section> | ||
155 | <h2>oslo_middleware</h2> | ||
156 | </section> | ||
157 | <section> | ||
158 | <h2>other middleware</h2> | ||
159 | </section> | ||
160 | </section> | ||
161 | |||
162 | |||
163 | </div> | ||
164 | |||
165 | <script src="../lib/js/head.min.js"></script> | ||
166 | <script src="../js/reveal.js"></script> | ||
167 | |||
168 | <script> | ||
169 | |||
170 | // Full list of configuration options available at: | ||
171 | // https://github.com/hakimel/reveal.js#configuration | ||
172 | Reveal.initialize({ | ||
173 | controls: true, | ||
174 | progress: true, | ||
175 | history: true, | ||
176 | center: true, | ||
177 | |||
178 | transition: 'slide', // none/fade/slide/convex/concave/zoom | ||
179 | |||
180 | // Optional reveal.js plugins | ||
181 | dependencies: [ | ||
182 | { | ||
183 | src: '../lib/js/classList.js', condition: function () { | ||
184 | return !document.body.classList; | ||
185 | } | ||
186 | }, | ||
187 | { | ||
188 | src: '../plugin/markdown/marked.js', condition: function () { | ||
189 | return !!document.querySelector('[data-markdown]'); | ||
190 | } | ||
191 | }, | ||
192 | { | ||
193 | src: '../plugin/markdown/markdown.js', condition: function () { | ||
194 | return !!document.querySelector('[data-markdown]'); | ||
195 | } | ||
196 | }, | ||
197 | { | ||
198 | src: '../plugin/highlight/highlight.js', | ||
199 | async: true, | ||
200 | condition: function () { | ||
201 | return !!document.querySelector('pre code'); | ||
202 | }, | ||
203 | callback: function () { | ||
204 | hljs.initHighlightingOnLoad(); | ||
205 | } | ||
206 | }, | ||
207 | {src: '../plugin/zoom-js/zoom.js', async: true}, | ||
208 | {src: '../plugin/notes/notes.js', async: true} | ||
209 | ] | ||
210 | }); | ||
211 | |||
212 | </script> | ||
213 | |||
214 | </body> | ||
215 | </html> | ||