Related
I have a site using Bootstrap 5 that includes the following input tag:
<input class="form-check-input ms-1" id="validated" name="validated" type="checkbox" checked>
The inclusion of the form-check-input class causes the client to generate the error message:
Refused to load the image 'data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath
fill='none' stroke='%23fff' stroke-linecap='round'
stroke-linejoin='round' stroke-width='3' d='M6 10l3
3l6-6'/%3e%3c/svg%3e' because it violates the following Content
Security Policy directive: "img-src 'self' www.w3.org".
Can someone please lend me a clue as to why this is being blocked? I have tried all the permutations of data://www.w3.org, http://www.w3.org, *.w3.org, etc., in the CSP and none seem to satisfy the client.
This happens identically with a Chrome and Edge client.
You can also extract the SVGs into separate files using Webpack. For example, see the official documentation at https://getbootstrap.com/docs/5.2/getting-started/webpack/#extracting-svg-files
modules.exports = {
...,
module: {
rules: [
{
mimetype: 'image/svg+xml',
scheme: 'data',
type: 'asset/resource',
generator: {
filename: 'icons/[hash].svg'
}
}
]
}
};
Bootstrap CSS stylesheet contains .form-check-input class with data:-Url images:
.form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
background-color: #0d6efd;
border-color: #0d6efd;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
To allow these images you have to add data: scheme-source into img-src directive.
I want to create array of object of product sizes inside array of object of product info.
this is the HTML tree I am trying to scrape
<div class="product-thumbShim"></div><a target="_blank" href="tshirts/herenow/herenow-men-black-printed-round-neck-t-shirt/4318138/buy" style="display: block;"><div class="product-imageSliderContainer"><div class="product-sliderContainer" style="display: block;"><div style="background: rgb(244, 255, 249);"><div style="height: 280px; width: 100%;"><picture class="img-responsive" style="width: 100%; height: 100%; display: block;"><source srcset="
https://assets.myntassets.com/f_webp,dpr_1.0,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg ,
https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 1.5x,
https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 1.8x,
https://assets.myntassets.com/f_webp,dpr_2.0,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.0x,
https://assets.myntassets.com/f_webp,dpr_2.2,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.2x,
https://assets.myntassets.com/f_webp,dpr_2.4,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.4x,
https://assets.myntassets.com/f_webp,dpr_2.6,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.6x,
https://assets.myntassets.com/f_webp,dpr_2.8,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.8x" type="image/webp"><img src="https://assets.myntassets.com/dpr_2,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg" class="img-responsive" alt="HERE&NOW Men Black Printed Round Neck T-shirt" title="HERE&NOW Men Black Printed Round Neck T-shirt" style="width: 100%; display: block;"></picture></div></div></div></div><div class="product-productMetaInfo"><h3 class="product-brand">HERE&NOW</h3><h4 class="product-product">Men Printed Round Neck T-shirt</h4><h4 class="product-sizes"><!-- react-text: 396 -->Sizes: <!-- /react-text --><span class="product-sizeInventoryPresent">S, </span><span class="product-sizeInventoryPresent">M, </span><span class="product-sizeInventoryPresent">L, </span><span class="product-sizeInventoryPresent">XL, </span><span class="product-sizeInventoryPresent">XXL</span></h4><div class="product-price"><span><span class="product-discountedPrice"><!-- react-text: 405 -->Rs. <!-- /react-text --><!-- react-text: 406 -->374<!-- /react-text --></span><span class="product-strike"><!-- react-text: 408 -->Rs. <!-- /react-text --><!-- react-text: 409 -->749<!-- /react-text --></span></span><span class="product-discountPercentage">(50% OFF)</span></div></div></a><div class="image-grid-similarColorsCta product-similarItemCta"><span class="myntraweb-sprite image-grid-similarColorsIcon sprites-similarProductsIcon"></span><span class="image-grid-iconText">VIEW SIMILAR</span></div><div class="product-actions "><span class="product-actionsButton product-wishlist " style="width: 100%; text-align: center;"><!-- react-text: 416 -->wishlist<!-- /react-text --></span></div><div class="product-sizeDisplayDiv"><div class="product-sizeDisplayHeader"><span>Select a size</span><span class="myntraweb-sprite product-sizeDisplayRemoveMark sprites-remove"></span></div><div class="product-sizeButtonsContaier"><button class="product-sizeButton">S</button><button class="product-sizeButton">M</button><button class="product-sizeButton">L</button><button class="product-sizeButton">XL</button><button class="product-sizeButton">XXL</button></div></div>"
adn this is my current output
[
{
brandName: 'max',
productName: 'Colourblocked Round Neck T-shirt',
productSizes: 'Sizes: S, M, L, XL, XXL'
},
{
brandName: 'YOLOCLAN',
productName: 'Printed Round Neck T-shirt',
productSizes: 'Sizes: S, M, L, XL, XXL, 3XL'
},
{
brandName: 'Maniac',
productName: 'Colourblocked Hooded T-shirt',
productSizes: 'Sizes: S, M, L, XL'
}
]
and my expected output is
[
{
brandName: 'max',
productName: 'Colourblocked Round Neck T-shirt',
productSizes: [
Size: 'S',
Size: 'M',
Size: 'L',
]
}
]
current code :
const res = await page.$$eval(".product-base", (productInfo) =>
productInfo.map((product) => {
return {
brandName: product.querySelector(".product-brand").innerText,
productName: product.querySelector(".product-product").innerText,
productSizes: product.querySelector(".product-sizes").innerText,
};
}),
);
and also how often I can scrape websites in order to not get my IP blocked
You could do something like this:
const res = await page.$$eval(".product-base", (productInfo) =>
productInfo.map((product) => {
let productSizeText = product.querySelector(".product-sizes").innerText;
let productSizeArr = productSizeText.replace('Sizes:', '').trim().split(',');
return {
brandName: product.querySelector(".product-brand").innerText,
productName: product.querySelector(".product-product").innerText,
productSizes: productSizeArr,
};
}),
);
Second answer for the HTML URLs: Using Puppeteer.js you can get the source tag URLs like below:
let imageURLArr = await page.evaluate(() => {
//This will get the first sourceTag of the DOM, change the value 0 according to your DOM that you are scraping if it has more source tags and is not the first source tag element
let sourceTag = document.getElementsByTagName('source')[0];
// check selector exists
if (sourceTag) {
// This will give you all the image URLs of source tag
let imagURLs = sourceTag.getAttribute('srcset')
return imagURLs;
}
});
console.log(imageURLArr);
When I select a tab, the name of the tab changes color. I want to understand how to change the icon color as well.
<BottomNavigationTab
title="Profile"
icon={(focused) => {
return (
<Icon
name="person-outline"
style={{height: 30, width: 30, marginTop: 5}}
fill={focused ? '#B9995A' : '#1f1f1f'}
/>
);
}}
style={tabStyle}
/>
Just listen to the state index and change the color with an if statement
const HomeIcon = (props) => (<Icon name={state.index == 0 ? 'home' : 'home-outline'} fill={state.index == 0 ? '#000' : ''#eee} />)
<BottomNavigation
selectedIndex={state.index}
onSelect={index => {
setTabIndex(index)
navigation.navigate(state.routeNames[index])
}}>
<BottomNavigationTab title="Home" icon={HomeIcon}/>
<BottomNavigationTab title="Search" icon={SearchIcon}/>
</BottomNavigation>
I am following the tutorial: "Build a real-time chat app with Node-RED in 5 minutes" http://www.ibm.com/developerworks/cloud/library/cl-rtchat-app/
But the Deploy button is not enabled. So I can not deploy.
I have installed CF command line and run "push" for my app. This is what I learned in the "Start Coding" in the dashboard, under the "CFApp". It was successful.
Is this "push" the same as the "deploy" in the Node-Red editor?
Thanks.
Zheng
That tutorial has a slightly misleading screenshot of the editor, with a blank workspace and an enabled deploy button. The deploy button only becomes active when there are changes in the workspace that have not been deployed to the runtime.
A 'push' is used to upload the node-red application into bluemix. This is different to then deploying your flows into the application.
The deploy button is different from the CF push. The node-red deploy button is available in the node-red graphical UI.
Once you create your node-red application you have to launch it.
This is bullet number 3 on step 1 on the tutorial. On the Bluemix dashboard click in the application name to launch it.
The main window for node-red application is displayed (bullet number 4 on step 1 for the tutorial).
Clicking on the big red button "Go to your node-RED flow editor" will open the node-red flow editor (displayed on bullet number 5 on step 1). At this time you should see an empty sheet and the "Deploy" button at the top-right corner should be disabled.
Follow step 2 instructions to import the node-red flow (I included it below for your convenience):
[{"id":"bc740d23.438bf","type":"websocket-listener","path":"/ws/chat","wholemsg":"false"},{"id":"c86da933.379258","type":"websocket in","name":"","server":"bc740d23.438bf","x":112,"y":61,"z":"d46b9957.2b9468","wires":[["f9476129.06b8a"]]},{"id":"f9476129.06b8a","type":"function","name":"","func":"delete msg._session;\nreturn msg;\n\n","outputs":1,"valid":true,"x":286,"y":61,"z":"d46b9957.2b9468","wires":[["bda54943.425ab8"]]},{"id":"bda54943.425ab8","type":"websocket out","name":"","server":"bc740d23.438bf","x":467,"y":61,"z":"d46b9957.2b9468","wires":[]},{"id":"df7af34a.20851","type":"http in","name":"","url":"/chat","method":"get","x":120,"y":129,"z":"d46b9957.2b9468","wires":[["969892ad.69677"]]},{"id":"969892ad.69677","type":"template","name":"","field":"","template":"<head>\n <meta name=\"viewport\" content=\"width=320, initial-scale=1\">\n <title>Chat</title>\n</head>\n\n<body>\n <div id=\"wrapper\">\n <div id=\"chat_box\" class=\"content\"></div>\n\n <div id=\"footer\">\n <div class=\"content\">\n <input type=\"text\" id=\"user\" placeholder=\"Who are you?\" />\n <input type=\"text\" id=\"message\" placeholder=\"What do you want to say?\" />\n <input type=\"button\" id=\"send_btn\" value=\"Send\" onclick=\"sendMessage()\">\n </div>\n </div>\n </div>\n</body>\n\n<script type=\"text/javascript\">\n var wsUri = \"ws://{{req.headers.host}}/ws/chat\";\n var ws = new WebSocket(wsUri);\n\n function createSystemMessage(message) {\n var message = document.createTextNode(message);\n\n var messageBox = document.createElement('p');\n messageBox.className = 'system';\n\n messageBox.appendChild(message);\n\n var chat = document.getElementById('chat_box');\n chat.appendChild(messageBox);\n }\n\n function createUserMessage(user, message) {\n var user = document.createTextNode(user + ': ');\n\n var userBox = document.createElement('span');\n userBox.className = 'username';\n userBox.appendChild(user);\n\n var message = document.createTextNode(message);\n\n var messageBox = document.createElement('p');\n messageBox.appendChild(userBox);\n messageBox.appendChild(message);\n\n var chat = document.getElementById('chat_box');\n chat.appendChild(messageBox);\n }\n\n ws.onopen = function(ev) {\n createSystemMessage('[Connected]');\n };\n\n ws.onclose = function(ev) {\n createSystemMessage('[Disconnected]');\n }\n\n ws.onmessage = function(ev) {\n var payload = JSON.parse(ev.data);\n createUserMessage(payload.user, payload.message);\n\n var chat = document.getElementById('chat_box');\n chat.scrollTop = chat.scrollHeight;\n }\n\n function sendMessage() {\n var user = document.getElementById('user');\n var message = document.getElementById('message');\n\n var payload = {\n message: message.value,\n user: user.value,\n ts: (new Date()).getTime()\n };\n\n ws.send(JSON.stringify(payload));\n message.value = \"\";\n };\n</script>\n\n<style type=\"text/css\">\n * {\n font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, serif;\n font-style: italic;\n font-size: 24px;\n }\n\n html, body, #wrapper {\n margin: 0;\n padding: 0;\n height: 100%;\n }\n\n #wrapper {\n background-color: #ecf0f1;\n }\n\n #chat_box {\n box-sizing: border-box;\n height: 100%;\n overflow: auto;\n padding-bottom: 50px;\n }\n\n #footer {\n box-sizing: border-box;\n position: fixed;\n bottom: 0;\n height: 50px;\n width: 100%;\n background-color: #2980b9;\n }\n\n #footer .content {\n padding-top: 4px;\n position: relative;\n }\n\n #user { width: 20%; }\n #message { width: 68%; }\n #send_btn {\n width: 10%;\n position: absolute;\n right: 0;\n bottom: 0;\n margin: 0;\n }\n\n .content {\n width: 70%;\n margin: 0 auto;\n }\n\n input[type=\"text\"],\n input[type=\"button\"] {\n border: 0;\n color: #fff;\n }\n\n input[type=\"text\"] {\n background-color: #146EA8;\n padding: 3px 10px;\n }\n\n input[type=\"button\"] {\n background-color: #f39c12;\n border-right: 2px solid #e67e22;\n border-bottom: 2px solid #e67e22;\n min-width: 70px;\n display: inline-block;\n }\n\n input[type=\"button\"]:hover {\n background-color: #e67e22;\n border-right: 2px solid #f39c12;\n border-bottom: 2px solid #f39c12;\n cursor: pointer;\n }\n\n .system,\n .username {\n color: #aaa;\n font-style: italic;\n font-family: monospace;\n font-size: 16px;\n }\n\n #media(max-width: 1000px) {\n .content { width: 90%; }\n }\n\n #media(max-width: 780px) {\n #footer { height: 91px; }\n #chat_box { padding-bottom: 91px; }\n\n #user { width: 100%; }\n #message { width: 80%; }\n }\n\n #media(max-width: 400px) {\n #footer { height: 135px; }\n #chat_box { padding-bottom: 135px; }\n\n #message { width: 100%; }\n #send_btn {\n position: relative;\n margin-top: 3px;\n width: 100%;\n }\n }\n</style>\n","x":286,"y":129,"z":"d46b9957.2b9468","wires":[["82cb0232.7d35"]]},{"id":"82cb0232.7d35","type":"http response","name":"","x":429,"y":129,"z":"d46b9957.2b9468","wires":[]}]
Follow the other steps to import the flow above, deploy and run the application.
How to run SpecFlow tests in OrchardCMS 1.4?
Steps:
Download OrchardCMS from here.
Run UsersFeature.ICanCreateANewUser() test. (WITHOUT BUILDING ALL SOLUTION!)
Result in Unit Test Sessions - Session window:
...
error: Unable to locate <input> name SiteName in page html:
<html>
<head>
<title>A 'script' named 'jQuery' could not be found.</title>
<style>
...
</style>
</head>
<body bgcolor="white">
<span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1>
<h2> <i>A 'script' named 'jQuery' could not be found.</i> </h2></span>
...
<b> Description: </b>An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
<br><br>
<b> Exception Details: </b>System.InvalidOperationException: A 'script' named 'jQuery' could not be found.<br><br>
<b>Source Error:</b> <br><br>
<table width=100% bgcolor="#ffffcc">
<tr>
<td>
<code><pre>
Line 259: throw new InvalidOperationException(String.Format(CultureInfo.CurrentCulture, "A '{1}' named '{0}' could not be found.", settings.Name, settings.Type));
Line 260: }
<font color=red>Line 261: ExpandDependencies(resource, settings, allResources);
</font>Line 262: }
Line 263: requiredResources = (from DictionaryEntry entry in allResources</pre></code>
</td>
</tr>
</table>
<br>
<b> Source File: </b> ...OrchardCMS_1.4\src\Orchard\UI\Resources\ResourceManager.cs<b> Line: </b> 261
<br><br>
<b>Stack Trace:</b> <br><br>
<table width=100% bgcolor="#ffffcc">
<tr>
<td>
<code><pre>
[InvalidOperationException: A 'script' named 'jQuery' could not be found.]
Orchard.UI.Resources.ResourceManager.BuildRequiredResources(String resourceType) in F:\coding\zulatm\OrchardCMS_1.4\src\Orchard\UI\Resources\ResourceManager.cs:261
Orchard.Core.Shapes.CoreShapes.WriteResources(Object Display, TextWriter Output, String resourceType, Nullable`1 includeLocation, Nullable`1 excludeLocation) in F:\coding\zulatm\OrchardCMS_1.4\src\Orchard.Web\Core\Shapes\CoreShapes.cs:354
CallSite.Target(Closure , CallSite , CoreShapes , Object , TextWriter , String , ResourceLocation , Object ) +420
System.Dynamic.UpdateDelegates.UpdateAndExecuteVoid6(CallSite site, T0 arg0, T1 arg1, T2 arg2, T3 arg3, T4 arg4, T5 arg5) +1323
Orchard.Core.Shapes.CoreShapes.HeadScripts(Object Display, TextWriter Output) in F:\coding\zulatm\OrchardCMS_1.4\src\Orchard.Web\Core\Shapes\CoreShapes.cs:286
</body>
That is shown for every test case in SpecFlow I tried.
have you tried with a source enlistment rather than downloading the 1.4 release?
Didn't build all solution. Hence the Jquery module was not built and no JQuery script files there. Stupid mistake!