Merge branch 'release-0.2.1'

Author: JimLiu

CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="0.2.1"></a>
+## [0.2.1](https://github.com/JimLiu/bbcode-to-react/compare/0.1.3...v0.2.1) (2016-10-29)
+
+* More tests
+* Fixed security issue
+* Customize tag
+
+
 <a name="0.1.3"></a>
 ## [0.1.3](https://github.com/JimLiu/bbcode-to-react/compare/0.1.1...v0.1.3) (2016-10-28)
 

README.md

@@ -25,6 +25,49 @@ const Example = (props) => {
 
 ```
 
+## Add new tag example
+
+```js
+import React from 'react';
+import parser, { Tag } from 'bbcode-to-react';
+
+class YoutubeTag extends Tag {
+ toReact() {
+ // using this.getContent(true) to get it's inner raw text.
+ const attributes = {
+ src: this.getContent(true),
+ width: this.params.width || 420,
+ height: this.params.height || 315,
+ };
+ return (
+ <iframe
+ {...attributes}
+ frameBorder="0"
+ allowFullScreen
+ />
+ );
+ }
+}
+
+class BoldTag extends Tag {
+ toReact() {
+ // using this.getComponents() to get children components.
+ return (
+ <b>{this.getComponents()}</b>
+ );
+ }
+}
+
+parser.registerTag('youtube', YoutubeTag); // add new tag
+parser.registerTag('b', BoldTag); // replace exists tag
+
+const Example = (props) => {
+ return (
+ <p>{parser.toReact('[youtube width="400"]https://www.youtube.com/watch?v=AB6RjNeDII0[/youtube]')}</p>
+ );
+}
+
+```
 
 ## Development
 
@@ -51,3 +94,7 @@ Watch tests:
 ```sh
 npm run test-watch
 ```
+
+# Credits
+
+`bbcode-to-react` uses the parser from [bbcodejs](https://github.com/vishnevskiy/bbcodejs), so much of the credit is due there.

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bbcode-to-react",
- "version": "0.1.3",
+ "version": "0.2.1",
  "description": "A utility for turning raw BBCode into React elements. ",
  "main": "lib/index.js",
  "scripts": {

src/__tests__/customize.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import parser, { Tag } from '../';
+
+class YoutubeTag extends Tag {
+ toReact() {
+ // using this.getContent(true) to get it's inner raw text.
+ const attributes = {
+ src: this.getContent(true),
+ width: this.params.width || 420,
+ height: this.params.height || 315,
+ };
+ return (
+ <iframe
+ {...attributes}
+ frameBorder="0"
+ allowFullScreen
+ />
+ );
+ }
+}
+
+class BoldTag extends Tag {
+ toReact() {
+ // using this.getComponents() to get children components.
+ return (
+ <b>{this.getComponents()}</b>
+ );
+ }
+}
+
+parser.registerTag('youtube', YoutubeTag); // add new tag
+parser.registerTag('b', BoldTag); // replace exists tag
+
+describe('customize tag', () => {
+ it('should parse customize youtube tag to react', () => {
+ const bbcode = '[youtube width="400"]https://www.youtube.com/watch?v=AB6RjNeDII0[/youtube]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('');
+ expect(wrapper.type()).toBe('iframe');
+ expect(wrapper.prop('src')).toBe('https://www.youtube.com/watch?v=AB6RjNeDII0');
+ expect(wrapper.prop('width').toString()).toBe('400');
+ expect(wrapper.prop('height').toString()).toBe('315');
+ expect(wrapper.prop('frameBorder').toString()).toBe('0');
+ expect(wrapper.prop('allowFullScreen')).toBe(true);
+ });
+
+ it('should replace the exist tag', () => {
+ const bbcode = '[b]strong[/b]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('strong');
+ expect(wrapper.type()).toBe('b');
+ expect(wrapper.html()).toBe('<b>strong</b>');
+ });
+});

src/__tests__/list.test.js

@@ -13,30 +13,75 @@ describe('[list]', () => {
  });
 
  it('should parse [list=a] to react', () => {
- const bbcode = '[list=a]list[/list]';
+ const bbcode = `[list=a]
+[*]The first possible answer
+[*]The second possible answer
+[*]The third possible answer
+[/list]`;
  const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
 
- expect(wrapper.text()).toBe('list');
  expect(wrapper.type()).toBe('ol');
+ expect(wrapper.find('li').length).toBe(3);
+ expect(wrapper.find('li').first().text().trim()).toBe('The first possible answer');
  expect(wrapper.prop('style').listStyleType).toBe('lower-alpha');
  });
 
 
  it('should parse [list=A] to react', () => {
- const bbcode = '[list=A]list[/list]';
+ const bbcode = `[list=A]
+[*]The first possible answer
+[*]The second possible answer
+[*]The third possible answer
+[/list]`;
  const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
 
- expect(wrapper.text()).toBe('list');
  expect(wrapper.type()).toBe('ol');
+ expect(wrapper.find('li').length).toBe(3);
+ expect(wrapper.find('li').first().text().trim()).toBe('The first possible answer');
  expect(wrapper.prop('style').listStyleType).toBe('upper-alpha');
  });
 
+ it('should parse [list=i] to react', () => {
+ const bbcode = `[list=i]
+[*]The first possible answer
+[*]The second possible answer
+[*]The third possible answer
+[/list]`;
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.type()).toBe('ol');
+ expect(wrapper.find('li').length).toBe(3);
+ expect(wrapper.find('li').first().text().trim()).toBe('The first possible answer');
+ expect(wrapper.prop('style').listStyleType).toBe('lower-roman');
+ });
+
+
+ it('should parse [list=I] to react', () => {
+ const bbcode = `[list=I]
+[*]The first possible answer
+[*]The second possible answer
+[*]The third possible answer
+[/list]`;
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.type()).toBe('ol');
+ expect(wrapper.find('li').length).toBe(3);
+ expect(wrapper.find('li').first().text().trim()).toBe('The first possible answer');
+ expect(wrapper.prop('style').listStyleType).toBe('upper-roman');
+ });
+
  it('should parse [list=1] to react', () => {
- const bbcode = '[list=1]list[/list]';
+ const bbcode = `[list=1]
+[*]Go to the shops
+[*]Buy a new computer
+[*]Swear at computer when it crashes
+[/list]`;
  const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
 
- expect(wrapper.text()).toBe('list');
  expect(wrapper.type()).toBe('ol');
+ expect(wrapper.find('li').length).toBe(3);
+ expect(wrapper.find('li').first().type()).toBe('li');
+ expect(wrapper.prop('style').listStyleType).toBe('decimal');
  });
 
  it('should parse [*]item[/*] to react', () => {

src/__tests__/parser.test.js

@@ -1,13 +1,24 @@
+// http://www.react.org.au/forum/faq.php?mode=bbcode
+
 import React from 'react';
 import { shallow } from 'enzyme';
 
 import parser from '../';
 
 describe('parser', () => {
  it('should parse bbcode to react', () => {
- const wrapper = shallow(<div>{parser.toReact('[b]strong[/b]')}</div>);
+ const bbcode = '[b]strong[/b]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
 
  expect(wrapper.text()).toBe('strong');
- expect(wrapper.html()).toBe('<div><strong>strong</strong></div>');
+ expect(wrapper.html()).toBe('<strong>strong</strong>');
+ });
+
+ it('should encode html', () => {
+ const bbcode = '[b]<strong>strong</strong>[/b]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('<strong>strong</strong>');
+ expect(wrapper.html()).toBe('<strong>&lt;strong&gt;strong&lt;/strong&gt;</strong>');
  });
 });

src/__tests__/security.test.js

@@ -0,0 +1,81 @@
+// http://1nfosec4all.blogspot.com/2012/07/bulletin-board-code-bbcode-xss-exploit.html
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import parser from '../';
+
+describe('security test', () => {
+ it('should not allow [URL] Tag injection', () => {
+ const bbcode = '[url]javascript:alert(0)[/url]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('javascript:alert(0)');
+ expect(wrapper.type()).toBeUndefined();
+ });
+
+ it('should not allow [COLOR] Tag Injection', () => {
+ const bbcode = '[color=#ff0000;font-size:100px;]Got You[/color]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('Got You');
+ expect(wrapper.prop('style').color).not.toBe('#ff0000;');
+ expect(wrapper.prop('style').fontSize).toBeUndefined();
+ });
+
+ it('should not allow [COLOR] Tag Injection', () => {
+ const bbcode = '[color=#ff0000;You:expression(alert(String.fromCharCode(88,83,83)));]Got You[/color]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('Got You');
+ expect(wrapper.prop('style').color).not.toBe('#ff0000;');
+ expect(wrapper.prop('style').color).toBe('#ff0000;You:expression(alert(String.fromCharCode(88,83,83)));');
+ expect(wrapper.prop('style').expression).toBeUndefined();
+ });
+
+ it('should not allow [FONT] Tag Injection', () => {
+ const bbcode = '[font=Impact, Compacta, Chicago, sans-serif;color:red;]Got You[/font]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>);
+
+ expect(wrapper.html()).toBe('<div>[font=Impact, Compacta, Chicago, sans-serif;color:red;]Got You[/font]</div>');
+ });
+
+ it('should not allow [FONT] Tag Injection', () => {
+ const bbcode = '[font=Impact, Compacta, Chicago, sans-serif;You:expression(alert(String.fromCharCode(88,83,83)));]Got You[/font]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>);
+
+ expect(wrapper.html()).toBe('<div>[font=Impact, Compacta, Chicago, sans-serif;You:expression(alert(String.fromCharCode(88,83,83)));]Got You[/font]</div>');
+ });
+
+ it('should not allow [IMG] Tag Injection', () => {
+ const bbcode = '[img]NotExist.png" onerror="alert(String.fromCharCode(88,83,83))[/img]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.type()).toBe('img');
+ expect(wrapper.prop('onerror')).toBeUndefined();
+ });
+
+ it('should not allow [TABLE] Tag Injection', () => {
+ const bbcode = '[table cellSpacing="0" cellPadding="0" width="100%"][tbody][tr][td width="*" onmouseover="alert(String.fromCharCode(88,83,83))"]Got You[/td][/tr][/tbody][/table]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>);
+
+ expect(wrapper.find('td').first().prop('width')).toBe('*');
+ expect(wrapper.find('td').first().prop('onmouseover')).toBeUndefined();
+ expect(wrapper.find('td').first().text()).toBe('Got You');
+ });
+
+ it('should not allow Nested Tags Injection', () => {
+ const bbcode = '[url]http://www.good.com?[url] onmousemove=javascript:alert(String.fromCharCode(88,83,83));//[/url][/url]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>);
+
+ expect(wrapper.find('a').length).toBe(0);
+ });
+
+ it('should not allow Nested Tags Injection', () => {
+ const bbcode = '[img]http://foo.com/NotExist.png [img] onerror=javascript:alert(String.fromCharCode(88,83,83)) [/img] [/img]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>);
+
+ expect(wrapper.find('img').length).toBe(1);
+ expect(wrapper.find('img').first().type()).toBe('img');
+ expect(wrapper.find('img').first().prop('onerror')).toBeUndefined();
+ });
+});

src/__tests__/url.test.js

@@ -20,4 +20,22 @@ describe('[url]', () => {
  expect(wrapper.text()).toBe('bbcode-to-react');
  expect(wrapper.prop('href')).toBe('https://github.com/JimLiu/bbcode-to-react');
  });
+
+ it('should parse [email]no.one@domain.adr[/email] to react', () => {
+ const bbcode = '[email]no.one@domain.adr[/email]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.text()).toBe('no.one@domain.adr');
+ expect(wrapper.prop('href')).toBe('mailto:no.one@domain.adr');
+ });
+
+ it('should parse image link to react', () => {
+ const bbcode = '[url=https://github.com/JimLiu/bbcode-to-react]bbcode-to-react][img]logo.png[/img][/url]';
+ const wrapper = shallow(<div>{parser.toReact(bbcode)}</div>).children().first();
+
+ expect(wrapper.type()).toBe('a');
+ expect(wrapper.prop('href')).toBe('https://github.com/JimLiu/bbcode-to-react');
+ expect(wrapper.find('img').first().type()).toBe('img');
+ expect(wrapper.find('img').first().prop('src')).toBe('logo.png');
+ });
 });

src/parser.js

@@ -29,6 +29,16 @@ export default class Parser {
  parseParams(token) {
  const params = [];
 
+ function addParam(name, value) {
+ if (name) {
+ const n = name.trim();
+ // ignore on* events attribute
+ if (n.length && n.toLowerCase().indexOf('on') !== 0) {
+ params.push([n, value]);
+ }
+ }
+ }
+
  if (token) {
  let key = [];
  let target = key;
@@ -48,7 +58,7 @@ export default class Parser {
  } else if (c !== terminate) {
  target.push(c);
  } else {
- params.push([key.join('').toLowerCase(), value.join('')]);
+ addParam(key.join(''), value.join(''));
 
  if (!SPACE_RE.test(terminate)) {
  skipNext = true;
@@ -60,7 +70,7 @@ export default class Parser {
  }
  });
 
- params.push([key.join('').toLowerCase(), value.join('')]);
+ addParam(key.join(''), value.join(''));
  }
 
  return params;

src/tags/index.js

@@ -42,4 +42,5 @@ export default {
  quote: QuoteTag,
  url: LinkTag,
  link: LinkTag,
+ email: LinkTag,
 };