Vue.js で XSS を作り込まないために気を付けること - セキュアスカイプラス
はじめに はじめまして、福岡オフィスで働いている前平です。 セキュアスカイ・テクノロジーでは、すでにいくつかのカテゴリのブログを発信していますが、技術を気軽に発信したり、エンジニアが普段の業務でどのような技術に触れているのかを紹介したりすることを目的として、新しく「エンジニアブログ」が立ち上がりました。 本記事では、最近になってようやく (汗) 検証した Vue.js でのクロスサイト・スクリプティング (XSS) について紹介します。 なお、本記事の内容は私見に基づくものであり、所属組織を代表するものではありません。 前提 本記事では Vue.js を使って XSS の脆弱性を作ってしまうようなケースを説明しますが、その他の JavaScript のライブラリ/フレームワークを使った場合でも同様のリスクがある可能性があります。 検証で利用したバージョン Vue.js v2.5.16 (サ
VuePressでディレクトリ構成からサイドバーのメニューを自動設定する - Qiita
VuePress、いいよね・・・ VuePress、ちょっと触ってみましたけどいい感じですね。 まだ機能はそこまで豊富じゃないですが プログラマーとしてはデザイン部分に頭を悩ませずに良い感じに仕上がってくれてるのが有り難いです。 Jekyllの代替として使ってみようかと思っているところです。 サイドバーを手動で定義するのが面倒です さて、現バージョンのVuePressにはサイドバーの機能が実装済みですが、 ここに表示するメニューはconfig.jsにて自力で定義してあげる必要があります。 module.exports = { themeConfig: { sidebar: [ '/', '/page-a', ['/page-b', 'Explicit link text'] ] } } VuePress - Default Theme Config config.jsで良い感じに設定します
Markdown Extensions | VuePress
# Markdown Extensions # Header Anchors Headers automatically get anchor links applied. Rendering of anchors can be configured using the markdown.anchor option. # Links # Internal Links Internal links are converted to <router-link> for SPA navigation. Also, every README.md or index.md contained in each sub-directory will automatically be converted to index.html, with corresponding URL /. For exampl
VuePress
Simplicity First Minimal setup with markdown-centered project structure helps you focus on writing. Vue-Powered Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. Performant VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
AWSの料金を「ざっくり」計算できるサイトを作る - Qiita
AWSの料金、ややこしいですよね。 サービスの選択肢が多く構成が柔軟なおかけで、さまざまな要件をカバーできるのは嬉しいのだけど、そのぶん料金体系がややこしいので、やるせない気持ちになります。 この気持ちはなんだろう、この気持ちはなんだろう、と自問しているうちに春になってしまったので、AWSの料金を「ざっくり」計算できるサイトを作り始めました。 ざっくりAWS 公式ツールの存在 Simple Monthly CalculatorというAWSの料金を計算できる公式のツールがあるのですが、悲しいことに名前ほどシンプルではありません。 正確な料金を算出するために入力項目が多いのは仕方がないとは思うのですが、サイトを開いたときの威圧感がすごいので、もう少しさっぱりできないかという気持ちがありました。 なので、公式ツールの敷居が高いと感じる自分のような人向けに、料金を「ざっくり」計算できるサイトを作り
Vue.jsの今後と次世代Web開発について
MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech
Vue.js、テンプレートで書くか？描画関数で書くか？ - Qiita
結論は「好みによる」となることが読めていますが、それでも比較してみたい。 どちらも「DOMと状態の関係性を表す」という役割は同じですが、それぞれどんなメリット・デメリットがあるかを考えてみます。 ※描画関数使う場合はみんなJSX使うよね？と思い込んでいるためJSX前提で話します。 そもそもの書き方の違い 初めに書き方の違いを軽く見てみましょう。 message という文字列を表示するだけの簡単なコンポーネントを書いてみます。 テンプレートで書く場合は下記のようになります。 <template> <h1>{{message}}</h1> </template> <script> export default { data() { return { message: "Hello" }; } }; </script> 違いとしては「テンプレートは静的で描画関数は動的」という点です。 そもそもテ
AngularJS vs. ReactJS vs. VueJS – Comparison | Pixxel
Deciding on a JavaScript framework for your web application can be overwhelming. Angular and React are very popular these days, and there is an upstart which has been getting a lot of traction lately: VueJS. What’s more, these are just a few of the new kids on the block. Javascripts in 2017 — things aren’t easy these days! Before we start — SPA or not? You should first make a clear decision as to
Learn Vue 3 | An Introductory Class to Vue.js by Sarah Drasner
Course DescriptionGet started quickly with the Vue.js JavaScript framework. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API! This course and others like it
Vue.js の scoped slot の理解 - kitak blog
毎回混乱して、ドキュメントを読んでいるのでまとめ。 以下のようなスロットの機能を利用したコンポーネント child で考える。 <div> {{ foo }} <child> <span>{{ bar }}</span> </child> {{ baz }} </div> https://jp.vuejs.org/v2/guide/components.html#コンパイルスコープ に書いてある話ですが、上記のテンプレートの foo, bar, baz のスコープは、そのテンプレートを扱っているコンポーネントになる。なんとなく、bar を展開している場所のスコープは child のような気がしてくるのだけど、そうではない。 bar を展開している場所で child のスコープを扱いたい( child のステートで class の付け替えをしたり )場合は、以前までは、child のステート
Custom printing for any purpose | Sticker Mule
Free shipping, free online proofs, fast turnaround.Sticker Mule makes custom printing easy. Order in 60 seconds and we'll turn your logo, design, or illustration into stickers, buttons, labels, and packaging. And don’t stress about your artwork. Send us the best possible version that you have and we'll prepare your design for high quality printing, absolutely free.
心理的負担を抑えつつVue.jsを0.12→2.4にアップグレードした話 - 弥生開発者ブログ
こんにちは、@mugi_uno です。 RubyKaigi盛り上がりましたね〜！ そして広島は美味しいものがたくさんでした。次回の仙台も楽しみですね！ さて、みなさんはフロントエンドのフレームワークには何を利用していますか？ Misocaでは一部機能でReact/ReduxによるSPA構成を採用しています。 めろたん(@renyamizuno_)の書いた過去のエントリーにも登場していますね。 tech.misoca.jp しかし、Misocaで利用しているのはReactだけではありません。 jQuery React/ReduxはSPAなどでパワーを発揮しますが、逆に気軽に取り回しにくいため、ちょっとしたコンポーネントを作りたいケースなどでは、さくっと書けるjQueryを利用することもまだまだ多いです。 しかし、DOM操作が柔軟すぎるため影響範囲が読めなかったり、ビューと状態の管理が複雑にな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsにおけるOSS活動
Slides | Riotz Works
Default Theme Config | VuePress
Configuration | VuePress
Evan You on Proxies - Advanced Components | Vue Mastery
やわらかVue.js
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
nuxtend
