Product Option Issue with Colon in Name/Value

[tomcornall]

https://app.intercom.io/a/apps/7236196445273cea007287c0c90a2f0d598567cc/respond/inbox/208455/conversations/11214672309

Repro

1. Add colon to the value of a product option
2. Go to product page and try to select option or add to cart:

Error: [$parse:syntax] Syntax Error: Token ':' is unexpected, expecting [)] at column 30 of the expression [changeOption('49','161' ,test:test); updateSlug('161' , '49' , 'test:test');; viewOption['49'] = 'test:test'; $root.showLoadingScreen();] starting at [:test); updateSlug('161' , '49' , 'test:test');; viewOption['49'] = 'test:test'; $root.showLoadingScreen();].
http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%3A&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=30&p3=changeOption('49'%2C'161'%20%2Ctest%3Atest)%3B%20updateSlug('161'%20%2C%20'49'%20%2C%20'test%3Atest')%3B%3B%20viewOption%5B'49'%5D%20%3D%20'test%3Atest'%3B%20%24root.showLoadingScreen()%3B&p4=%3Atest)%3B%20updateSlug('161'%20%2C%20'49'%20%2C%20'test%3Atest')%3B%3B%20viewOption%5B'49'%5D%20%3D%20'test%3Atest'%3B%20%24root.showLoadingScreen()%3B
    at https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:1:377
    at sf.throwError (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:28074)
    at sf.consume (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:28380)
    at sf.primary (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:26434)
    at sf.unary (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:25776)
    at sf.multiplicative (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:25522)
    at sf.additive (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:25348)
    at sf.relational (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:25182)
    at sf.equality (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:25006)
    at sf.logicalAND (https://d151ufcidijoq9.cloudfront.net/store-products-56b371fb53ee5/themes/meyer/resources/js/vendor.min.js:4:24856) <button class="md-button" type="button" ng-transclude="" ng-click="changeOption('49','161' ,test:test); updateSlug('161' , '49' , 'test:test');; viewOption['49'] = 'test:test'; $root.showLoadingScreen();" role="menuitem">

This also fails when using a colon in the product option's name (vs value).

[tomcornall]

Case 2

Also fails with the / character in the option. Likely to fail with numerous other unescaped chars.

[Mopok]

This specific case isn't related to JSON escaping, just missing quotes in twig.