I would like the change the layout of a web application but it is UTF-8 encoded. I have managed to use some online decoders and I know which part to modify but the decoding doesn't seem fully complete to work.
I want to move the div tag marked with * inside the previous one so instead of two lines I can have the data on one line which gives more on screen space.
<li class='ipsDataItem chat_row {{#callme}}ipsDataItem_new{{/callme}}' id='{{id}}'>
<div class='ipsPad_half {{#memberPhoto}}ipsPhotoPanel ipsPhotoPanel_tiny{{/memberPhoto}} ipsClearfix'>
{{#memberPhoto}}
<a href='{{memberUrl}}' class='ipsUserPhoto ipsUserPhoto_tiny' id='ips_uid_{{memberID}}'>
<img src='{{memberPhoto}}' alt=''>
</a>
{{/memberPhoto}}
<div>
<a href='#' data-action='mention' data-member='{{memberName}}'>{{{memberNameFormat}}}</a>
<span class='ipsPos_right'>
<span class='ipsType_small ipsType_light'>{{time}}</span>
{{#canEdit}}<a href='#' data-action='editMSGButton' data-id='{{id}}'><i class='fa fa-pencil-square'></i></a>{{/canEdit}}
{{#canDelete}}<a href='#' data-action='remove' data-id='{{id}}'><i class='fa fa-minus-square'></i></a>{{/canDelete}}
</span>
* <div class='ipsList_inline' id='chatraw_{{id}}' data-id='{{id}}' {{#canEdit}}data-action='editMSG'{{/canEdit}}>{{{message}}}</div>
</div>
</div>
</li>
This is the original encoded xml: https://pastebin.com/papiW75B
and this is what I managed to decode: https://pastebin.com/q24UfAEn. As you can see, the beginning part (line 1) is still a total mess but from line 2 forward it's all good.
What am I missing here? Should I do the decoding in another way?
I wouldn't describe that as being "UTF-8 encoded". It looks to me like obfuscated Javascript. It looks to me as if it's been deliberately obfuscated in order to prevent you doing what you are trying to do -- which I would describe more as reverse engineering rather than decoding. (Indeed, what you are trying to do might well be technically illegal unless you have permission from the copyright owner).
You've already done quite a good job at defeating the intentions of the people who created this application, and I don't think I can help you do any better.
Related
I'm trying to make a menu for my app, and I'm trying to avoid repeating the same HTML code, so I want to put some data into array and loop it. It works fine for text, but I'm having trouble passing Bootstrap icons which are written in <i> markups.
I'm working on an MVC .NET project in cshtml file.
Here is what I have:
#{
string[] menuItems= {"Clients"};
}
<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
<i class="bi bi-people-fill clients"></i>
<span class="menu-item-text">#menuItems[0]</span>
</a>
And I'm trying to achieve something like this:
#{
string[,] menuItems= {"Clients", "<i class="bi bi-people-fill clients"></i>"};
}
<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
#menuItems[0,1]
<span class="menu-item-text">#menuItems[0,0]</span>
</a>
Is there a way to make HTML read the string as part of the code?
By default any text being emitted from the server is HTML-encoded. You can bypass this by using Html.Raw():
#Html.Raw(menuItems[0,1])
Note that this should be used with caution, because if you use this to output anything that's provided by user input or in any way editable by users then you are exposing your users to security risks.
This could be a good opportunity for you to investigate other ways to achieve the same functionality without this potential risk. For example, you could already have the markup in the view and use the dynamic data to show/hide the markup. Or not even rely on server-side code at all and style/change menu items client-side.
In this fiddle, I want to hover over "Your Truly" and have the image appear, while the text disappears. Does an app have to be initialized for this to work? I didn't think it did...
The angular HTML look like this (I didn't move my whole app in here, just trying to get this part to work)
<a ng-init="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'">
<span ng-hide="imgsrc.show"
ng-mouseover="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'"
ng-mouseout="imgsrc.hide">
Yours Truly
</span>
<img ng-src="{{imgsrc}}"/>
</a>,
It is possible to make something like this work without making a proper controller, though I'd discourage it. That said, I went ahead and got it working anyway:
<p class="text-justify last-body" ng-app>
This growing collection of studies, curated by
<a ng-init="imgsrc={
src: 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg',
show: false,
};">
<span ng-mouseover="imgsrc.show = true" ng-mouseout="imgsrc.show = false">
Yours Truly
</span>
<img ng-src="{{ imgsrc.src }}" ng-show="imgsrc.show" />
</a>,
is focused primarily
on studies dealing with eh tohp ah key pig*. As a fan of mooshoo and aigeiaig, I'm open to
working with any dataset ranging from yakdkat studies to lakuktauka. If you would like
to submit a study for publishing, or if you have any questions about a particular study,
please feel free to Contact Me. Thank you for visiting, and happy wamotiem!
</p>
This will display the image when you hover over "Yours Truly", and hide the image when you move the mouse away. The main thing preventing your example from working was the missing ng-app directive from the top-most element. Aside from that, I also cleaned up some of the logic to make it easier to reason out what was going on.
Here's a JSFiddle if you want to see it in action: https://jsfiddle.net/kv4qvu3w/2/
I'm using the Froala editor v2 and I'm running into a very frustrating and intermittent problem. I'm embedding a custom HTML widget (a rich preview when the user enters a URL on its own line). But when I retrieve the final HTML to be saved to our database, it seems Froala decides to "clean up" my HTML before giving it to me. When I inspect the editor instance while I'm editing the content, all the markup is in good shape. But when I call $('.froala-editor').froalaEditor('html.get') to retrieve the HTML, the HTML for the URL preview widget is completely mangled.
My suspicion is that, since the entire preview is wrapped in an <a> tag to make the whole thing linked (and I don't have any nested <a> tags in it because that's bad HTML), Froala is taking the other structural elements like the divs, h# tags, p tags, etc and placing copies of the wrapping <a> tag inside all of them (as you'll see in the code samples) because it doesn't think you're allowed to have an <a> wrapping all that stuff. But that's just a guess.
And to top it all off, sometimes Froala will give me the HTML intact and other times it won't.
I don't think it makes any difference, but I'm using React to generate the widget and then injecting the resulting HTML into the editor. I've removed all the data-reactid attributes to reduce the clutter.
Original injected HTML (the outermost <p> tags are there because Froala seems to like to wrap everything in semantic block level tags):
<p>
<a href="http://www.google.com" target="_blank" class="embedly-preview" title="http://www.google.com" data-source-url="http://www.google.com">
<span class="ui media content-item-wrapper content-summary post-body">
<span class="media-left content-summary-image post-image">
<img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
</span>
<span class="media-body content-summary-body">
<h2 class="content-summary-title content-title post-title">Google</h2>
<p class="content-summary-content post-content">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</p>
<p class="content-summary-link">http://www.google.com</p>
</span>
</span>
</a>
</p>
What Froala gives me:
<p>
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">
<span class="ui media content-item-wrapper content-summary post-body">
<span class="media-left content-summary-image post-image">
<img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com…randing%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
</span>
<span class="media-body content-summary-body"></span>
</span>
</a>
</p>
<h2 class="content-summary-title content-title post-title">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Google</a>
</h2>
<p class="content-summary-content post-content">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</a>
</p>
<p class="content-summary-link">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">http://www.google.com</a>
</p>
The problem is not the editor, but the HTML structure you have. You have used a H2 tag inside a P tag which browsers do not allow (see https://stackoverflow.com/a/8696078/1806855 for more details) You could check that in a very basic jsFiddle: https://jsfiddle.net/0jLzm2b0/.
Instead it should work just fine if you'd use a DIV tag instead: https://jsfiddle.net/0jLzm2b0/1/. You can see the output is no longer changed.
After digging into the Froala code using a breakpoint to isolate the point at which the HTML gets mangled, turns out it's actually jQuery that's mangling my HTML. Effectively, given the original HTML from above in the variable html:
$(html).html() !== html
What's even more interesting is that (taking the relevant snippet from Froala's code where it wraps the fetched HTML in a div before processing):
$('<div>' + html + '</div>').html() !== $(html).html() !== html
(Clearly, wrapping html in a <div> will make the HTML not equal to the others, but even the HTML inside the <div> that is output is mangled from the original)
So the jQuery constructor is the thing being "helpful" by retooling my HTML for me.
I am wondering if anyone knows a way to combine the "a href", "img src", and "alt" tags. We deal with a large amount of images and it is pretty tedious copying and pasting the same thing for all three fields for each picture in dreamweaver. Doing it once would be ideal. From what I have seen there is probably not much of a chance in doing this. I am using either HTML or Javascript.
<a href="../../0_Images/CRG_UnitType.jpg" target="_blank">
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture">
</a>
AngularJS can also solve this problem. Source it in your HTML and set up a controller that includes your image data, and then you can use ng-repeat. The result is something like this.
<div ng-repeat="image in images">
<a href ="{{image.href}}" target="_blank">
<img SRC="{{image.src}}" width="{{image.width}}" height="{{image.height}}" border="2" class="picture">
</a>
</div>
First of all, your alt attributes should not contain your image file name, they should be used to describe the content of images in case they don't load, or in case someone visually impaired navigate through your website.
To answer the question, you definitivly need to use some server-side language to save time.
You could for instance display all your images quite easily with PHP by looping through an array of files and titles.
You need some basic understanding of this language (or any other server-side language) before doing so but the time you'll spend doing so won't be lost.
It's possible,
you can use jquery to do what you want, and if the src is the same of the href as in your example the way is:
In HTML use only image, and place an additional class:
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture auto_add_link">
Now add jquery function:
$( ".auto_add_link" ).wrap(function() {
return '';
});
Not so pretty, but it works
Demo on jsfiddle
I'm learning Javascript right now. Can anybody tell me why the second code block traces a empty path for -launch(this)- but using the first code block it gives me the right path?
"<form action='"+launchwebsite+"/subsite/' method='post' target='_blank' onsubmit='launch(this)'>"
and this not:
"<a onclick='launch(this)' title='launch' class='iblack' /></a></div>"
Best
Uli
The this refers to the the element it is attached to. In the first snippet it is the <form>- and in the second the <a>-element. Also the <a> lacks a href-attribute.
I'm not shure but if the code you put is exactly what you are testing you are missing a ;
<a onclick='launch(this)' title='launch' class='iblack' /></a></div> <-- You're Version
<a onclick='launch(this);' title='launch' class='iblack' /></a></div>
Else I never really did an onclick on a html control I usually do href="" to call another page php per exemple and in that page to the treatment I want.
Another point I`ve looked at is to catch this command in javascript you would need you to call and "blank" page as of
<a href="#" onClick='launch(this);' title='launch' class='iblack' /></a></div>
This last code acutally worked for me! Keep me in touch, wanna see if this works out for you!!
Patrick